html - 给定容器中的元素网格，如何处理导致元素溢出的边距？

Question

我有一个 608px 宽的容器，我的设计要求每行有 3 个元素。其中每个元素都是 192px。并且只有行中的前 2 项的 margin-right 为 16px。

问题是 CSS 为所有元素添加了 16px 的 margin-right。

我如何更新代码以使其每行 3 个元素，其中每行只有第一个和第二个元素具有 margin-right 填充？

我有一个 hacky 版本，我在其中制作了 margin-right 和 margin-left 8px 然后添加了一个负数 -8px 容器上的边距，但这感觉很老套，我很好奇现在是否有更优雅的方式使用 CSS3 来实现这一点。

.container {
  width: 608px;
  min-width: 608px;
  max-width: 608px;
  background: #efefef;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 192px;
  min-width: 192px;
  max-width: 192px;
  margin: 0 16px 16px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Answer 1

这是 CSS-grid 解决方案，您可以轻松控制元素之间的间隙，也不需要为它们显式指定宽度:

.container {
  width: 608px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-column-gap:16px;
  background: #efefef;
}

.item {
  border: 1px solid #ccc;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>