如何垂直对齐CSS网格卡的内容

Question

我正在网上商店工作。我们有一些示例产品：

问题是“添加到购物车”按钮始终处于不同的高度。该按钮应始终位于底部上方30像素-不管内容多少。

如果要在线检查： Link to Page under Construction

我尝试使用具有不同值的Flex-box，但现在遇到了麻烦。

Answer 1

填充（或边距）和CSS网格是您所追求的。

我在my website上针对我创建的素材卡有类似的设计：

例如，看一下第2行。我向左卡添加了更多内容，但所有内容均与右卡的内容保持一致。

整个布局由网格内的网格组成。您的示例中有一个外部网格；您需要做的就是同时使卡片本身变成网格。

这是检查时的外观：

这是您在网站上想要的卡片：

display: grid;
grid-template-rows: 1fr max-content;

之前：

之后：

从此处开始，在按钮底部添加页边空白很简单：

margin-bottom: 30px;
justify-self: center;

您可以使用类似的策略，通过将价格从容器中分离出来，使价格保持一致，从而使价格位于另一行上（当前，您的卡上只有两个“行”）：

忽略第三张和第四张卡，只看左边两张；他们两个都有三排。第一行是内容，第二行是价格，第三行是按钮。将卡更改为：

display: grid;
grid-template-columns: 1fr max-content max-content;

当然，您必须移动价格span，使其位于文档中按钮的正上方：