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