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

我正在开发Pinterest克隆，不同大小的卡片将根据窗口大小转移到不同的行，但我确实很难通过引导来对齐卡片。每当我把它投入工作，我就觉得我不能在不同的项目上复制它。 这是我目前的代码：

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

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

---

我错过了什么？我知道这是一个非常基本的问题，但我一直在努力解决前端对齐问题。

如果没有看到它的实际应用，就很难理解到底发生了什么。您提到其中一张牌有大量空白。你看过第一个孩子或最后一个孩子了吗

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

}

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

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

}