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





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

评论

以一种通用的方式，我会说“不”，因为这不是为网格做的事情……但是在特定情况下，我们总能找到解决方法
CSS网格中居中的可能重复项
@johnny我不认为这是重复的，这个问题是关于在网格单元内居中放置文本/项目，这与处理网格项目本身的包装和居中非常不同
我收回了。
是什么让您认为Flexbox和Grid可以做到相同？如果，那么我们为什么同时需要两者，一个就可以了。它们是两个完全不同的事物，尽管它们共享某些功能，但有些却不相同。而且我们两者都需要，因为没有一个单一的解决方案可以处理所有问题。

#1 楼

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

当伸缩项被要求在行/列居中时，它可以从头到尾访问整行的可用空间。 />
但是，在网格布局中，行和列必须与柔性线所不能比拟的：跟踪墙（a / k / a网格线）。例如，在您的代码中有三列。这些列将轨道分为三个单独的部分，并且网格项被限制在一个部分中。因为轨道壁会限制运动。

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

要使网格项目在动态布局中跨行居中，容器将仅需要一列（即没有分隔符），否则该项目将需要使用基于行的放置方式明确地移到中心。否则，请使用flexbox。

评论

通过“轨道墙”，您是简单地指的是网格轨道还是它们的排水沟？我不记得曾经使用该术语的规范。

– TylerH
18年6月15日在16:19
@TylerH，我在回答中会经常使用普通英语。我看到的就是“轨道墙”。关键是在flexbox中，唯一的对齐障碍是同级项。但是在网格中，还有一个额外的障碍：无法穿透的轨道纵横交错地穿过网格。

–迈克尔·本杰明（Michael Benjamin）
18年6月15日在16:27


这就是我在过去15个月左右的时间内不多阅读规范的内容：-)

– TylerH
18年6月15日在16:31
因此，当我们要居中放置项目但让每一行都具有相同的高度（即网格中最高的项目高度）时，我们仍然注定要失败-因为flex可以很好地居中但它可以做到行高，所以网格可以做到行高但无法对中

–黄种人
11月6日，0：51

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


另外，请看这里，

在CSS Grid中居中

/>（但是，这不是自动换行）

评论

令我感到惊讶的是，网格无法处理此问题，当您不知道将要有多少个项目但您希望将任何溢出的项目居中（无需让JavaScript涉及添加类）时，它会有点烦人和百分比宽度是这种情况下的最佳选择

–HastingsDirect
18年5月8日在15:06


您可以在网格中使用flex或创建嵌套网格。我认为这样做的目的是因为单轴和证明内容，因此要使用flex。

–约翰尼
18年5月8日在15:12