Bootstrap卡网格对齐时完全丢失

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;
    }

}

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