grid实现三行两列布局第一行按照1：2：2分成三个单元格

在HTML和CSS中，使用grid布局（Flexbox也是一种选择，但这里更注重Grid）来实现三行两列布局，并且第一行按照1:2:2的比例划分，可以这样做：

HTML部分：

<div class="grid-container">
  <div class="cell cell-2">单元格2</div>
  <div class="cell cell-3">单元格3</div>
  <!-- 其他行的单元格... -->
</div>

CSS部分：

.grid-container {
  display: grid; /* 使用grid布局 */
  grid-template-columns: repeat(2, 1fr); /* 列分两列，每一列占据1/2的可用空间 */
  grid-template-rows: auto auto calc(1fr * 2); /* 第一行自动高，第二行自动高，第三行占据剩余空间的一半 */
}

.cell {
  /* 如果需要给每个单元格添加样式... */
}

.cell-1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2; /* 第一行占用两个单元格 */
}

.cell-2 {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-column-end: 3;
  grid-row-end: 2; /* 第一行第二个单元格 */
}

.cell-3 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-column-end: 2;
  grid-row-end: 4; /* 第一至第三行，第二列 */
}

请注意，`calc(1fr * 2)`表示第一行的两个单元格，每个单元格占用1份（fr单位），所以总共有2份。