九宫格

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
</div>

.item {
  background-color: #bfebfe;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  display: grid; /* 注意ABC
竖着排,所以是column */
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr); /* * */
  gap: 10px;
}

flex 写法

九宫格布局 ul 设置flex-wrap
九个li设置width30%height30% margin-right:5% margin-bottom:5%
由于最后一行不需要下边距，最后一列不需要右边距
li:nth-of-type(3n)的margin-right设为0   (3,6,9)
li:nth-of-type(n+7)的margin-bottom设为0 (7,8,9)