Question

使用弹性容器设置flex-wrap: wrap，您可以使用justify-content: center将溢出的项目与中心对齐。

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

我创建了一支显示所需弹性行为的笔

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

Flex和Grid是不同的动物，因此弹性简单的行为可能无法很好地转换为网格。

Flex项目可以在容器中心，因为flex布局与flex lines一起使用。弹性线是行或列。

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

然而，在网格布局中，网格线必须与柔性线不在一起的东西竞争：跟踪墙。例如，在您的代码中有三列。这些列将网格线分成三个单独的部分，网格项限制在一个部分中。

因此，网格项不能使用关键字对齐属性（例如justify-content或justify-self）在行的中心，因为分隔列的墙限制了移动。这个问题在flex线上不存在。

对于要在行中居中的网格项，容器只需要有一列（即没有分隔符），或者需要使用类似line-based placement的内容将项目显式移动到中心。否则，请使用flexbox。

Answer 2

不是你想用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

（但这不是包装）

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

2 个答案: