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 元素在 flex 行居中时，它可以访问整行的可用空间。这使得居中简单易行。

然而，在网格布局中，存在轨道，它们相交 行和列。例如，在您的布局中有三列。这些列横跨行，将其分为三个独立的部分，网格元素被限制在一个部分中。

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

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

要使网格元素在动态布局中跨行居中，容器将只需要一列，或者需要使用类似 line-based placement 的方式将元素显式移动到中心。 .否则，使用 flexbox。