css - 在整个行/列中对齐网格元素(就像 flex 元素一样)

Question

使用 flex 容器和 flex-wrap: wrap设置您可以使用 justify-content: center 将溢出的元素对齐到中心.

有没有办法使用 CSS 网格实现溢出网格项的相同行为？

我已经创建了一个显示所需的 flex 行为的笔

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

<h3>Flex</h3>
<div class="container-flex">
  <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 class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <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 class="item">item</div>
</div>

https://codepen.io/JoeHastings/pen/PeEjjR

Answer 1

Flex 和 Grid 是不同的动物，因此在 flex 中简单的行为可能无法很好地转化为 grid。

flex 元素可以在容器中居中，因为 flex 布局适用于 flex lines . flex 线是一行或一列。

当一个 flex item 被要求在一行/列中居中时，它可以访问整行上的可用空间，从头到尾。

然而，在网格布局中，行和列必须与柔性线没有的东西抗衡:轨道墙(a/k/a 网格线)。例如，在您的代码中有三列。这些列将轨道划分为三个独立的部分，而网格元素被限制在一个部分内。

因此，网格项不能使用关键字对齐属性(例如 justify-content 或 justify-self)自动居中，因为轨道墙限制了移动。

可以使网格区域跨越整个行/列，然后在整个轨道上扫清道路，允许网格元素水平( justify-content: center )或垂直( align-self: center )居中，但 this behavior must be explicitly defined .

对于要在动态布局中跨行居中的网格元素，容器只需要一列(即没有分隔线)，或者需要使用类似 line-based placement 的内容将元素显式移动到中心。 .否则，请使用 flexbox。