我正在做一个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;
}
我可以在同一排上得到两张卡片，但是它们被压扁了，而且由于某种原因，一辆车的底部有一个巨大的空白空间。
我错过了什么？ 我知道这是一个非常基本的问题，但我总是在前端对齐的问题上挣扎。
如果没有看到它的实际行动，就很难理解发生了什么。 你提到其中一张卡片有大量的空白。 你看过: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;
}
}
与填充底部和边距底部-这应该消除任何空格的间距问题。。但可能影响整体设计。 这同样取决于列表中的哪个元素引起了问题。
