用grid写第一行二列其它行都是3列

以下是使用CSS Grid布局实现的代码示例：

HTML代码：

<div class="container">
  <div class="item1">第一行第一列</div>
  <div class="item2">第一行第二列</div>
  <div class="item3">第二行第一列</div>
  <div class="item4">第二行第二列</div>
  <div class="item5">第二行第三列</div>
  <div class="item6">第三行第一列</div>
  <div class="item7">第三行第二列</div>
  <div class="item8">第三行第三列</div>
</div>

CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fit, minmax(100px, auto));
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.item6 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item7 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.item8 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

解释：

• 使用display: grid;将容器转换为网格布局。
• 使用grid-template-columns: repeat(3, 1fr);设置网格列为3列，每列宽度平均分配。
• 使用grid-template-rows: repeat(auto-fit, minmax(100px, auto));设置网格行高度为自适应，最小高度为100px。
• 使用grid-gap: 10px;设置网格间距为10px。
• 使用grid-column和grid-row属性将每个项目放置在正确的单元格中。grid-column属性指定项目跨越的列数，grid-row属性指定项目跨越的行数。例如，grid-column: 1 / 2;表示项目跨越第1列到第2列（即第1列）。