在整个行/列中对齐网格项目（就像弹性项目一样）

Question

使用弹性容器和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 方式。你必须精确地使用 CSS-Grid，

<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-mid">item</div>
</div>
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    .item {
        background: red;
        border: 1px solid;
    }
    .item-mid{
        background:purple;
        grid-column:2/1;
    }

还有，看这里，

Centering in CSS Grid

（这不是包装，但是）

Answer 2

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

弹性项目可以在容器中居中，因为弹性布局适用于flex lines。 flex line 是一行或一列。

当要求弹性项目在行/列中居中时，它可以访问整行的可用空间，从头到尾。

然而，在网格布局中，行和列必须与弯曲线所不具备的东西抗衡：轨道墙（a/k/a 网格线）。例如，在您的代码中有三列。这些列将轨道分成三个独立的部分，而网格项目被限制在一个部分中。

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

可以使网格区域跨越整个行/列，然后清除整个轨道，允许网格项目水平居中（justify-content: center）或垂直居中（align-self: center），但是this behavior must be explicitly defined.

为了使网格项在动态布局中居中，容器需要只有一列（即没有分隔符），或者需要使用@987654323 之类的方式将该项显式移动到中心@。否则，使用 flexbox。