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

Question

使用flex容器和容器，flex-wrap: wrap您可以使用将对齐的内容与中心对齐justify-content: center。

有没有一种方法可以使用CSS网格实现使网格项溢出的相同行为？

我创建了一支笔，显示了所需的弯曲行为

.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>

Answer 1

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

伸缩项可以跨容器居中，因为伸缩布局可与伸缩线一起使用。伸缩线是行或列。

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

但是，在网格布局中，行和列必须与柔韧性线所不能比拟的： 跟踪墙 （a / k /
a网格线）。例如，在您的代码中有三列。这些列将轨道分为三个单独的部分，而网格项目则限制在一个部分中。

因此，由于轨道墙会限制移动，因此无法使用关键字对齐属性（例如justify-content或justify-self）将网格项自动居中放置在一行上。

可以使网格区域跨越整个行/列，然后清除整个轨道的路径，使网格项可以水平（justify-content: center）或垂直（align-self:center）居中，但是必须明确定义此行为

为了使网格项目在动态布局中跨行居中，容器将仅需要一列（即没有分隔线），或者需要使用_基于行的放置方式_
将项目显式移动到中心。否则，请使用flexbox。