在整个行/列中对齐网格项(如弹性项可以)

Question

使用弹性容器和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>

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

Answer 1

Flex和Grid是不同的动物,因此flex的简单行为可能无法很好地转换为网格.

弹性项目可以在容器中心,因为弹性布局与弹性线一起使用.弹性线是行或列.

当要求弹性项目以行/列为中心时,它可以从头到尾访问整行的可用空间.

然而,在网格布局中,网格线必须与柔性线不相交的东西:跟踪墙壁.例如,在您的代码中有三列.这些列将网格线分成三个单独的部分,网格项限制在一个部分中.

因此,网格项不能使用关键字对齐属性(例如justify-content或justify-self)在行的中心,因为分隔列的墙限制了移动.弹性线上不存在此问题.

对于要在整个行中居中的网格项,容器只需要有一列(即没有分隔线),或者需要使用基于行的放置等方式将项明确移动到中心.否则,请使用flexbox.