如何使用纯CSS Grid实现指定布局？已有对应HTML结构

.grid-layout {
  display: grid;
  /* 两列宽度比例1:2，可根据实际布局需求调整 */
  grid-template-columns: 1fr 2fr;
  /* 三行高度，也可设置为auto自适应内容高度 */
  grid-template-rows: 200px 200px 200px;
  /* 格子之间的间距 */
  gap: 10px;
  width: 100%;
}

.item {
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 4px;
}

/* 适配目标布局的跨行列配置 */
.item:first-child {
  /* 第一个元素占前两行高度 */
  grid-row: 1 / 3;
}

.item:last-child {
  /* 第四个元素占满整行宽度 */
  grid-column: 1 / -1;
}

如果目标布局是常规2行2列均等大小的网格，修改容器配置即可：

.grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
}

内容的提问来源于stack exchange，提问作者Marcos López