在引导卡网格对齐时完全丢失

Question

我正在研究一个Pinterest克隆，其中不同大小的卡片将根据窗口大小转移到不同的行，但我真的很难通过Bootstrap对齐卡片。 每当我让它工作时，我觉得我无法在不同的项目中复制它。 这是我当前的代码：

<div class="container">
<ul class="card-grid col-lg-6">
<% @pins.each do |pin| %>
<% if pin.photo.attached? %>
<li class="card"><%= cl_image_tag pin.photo.key, crop: :fill %>
<% else %>
<%= image_tag "filler.jpg", class: "card-img" %>
<% end %>
<div class="photobottom"><h2><%= link_to pin.title, pin %></h2></div>
</li>
<% end %>
</ul>
</div>

使用此功能，所有卡片都在一个单一列中。 如果我添加此代码：

.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
}

我可以在同一行上得到两张卡，但它们被压扁了，由于某种原因，一辆车的底部有大量的空白。

我在这里错过了什么？ 我知道这是一个非常基本的问题，但我总是在前端对齐方面苦苦挣扎。

Answer 1

如果不看到它的实际效果，就很难理解发生了什么。你提到其中一张卡有大量的空白。你看过:first-child还是:last-child？

// SCSS File...
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
// or the first item
li:first-child {
padding-bottom: 0;
margin-bottom: 0;
}
// or the last item
li:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
}

使用底部填充和底部边距 - 这应该删除间距问题的任何空格。但可能会影响整体设计。这同样取决于列表中的哪个元素导致了问题。