如何使用CSS Grid实现示例图中的指定网格布局效果？

问题原因 #

你代码里有两个错误导致布局不符合预期：

• 类选择器写错：.grid-item .item1中间的空格表示后代选择器，仅匹配grid-item元素内部的item1元素，而你的item1是和grid-item写在同一个元素上的类，需要去掉空格改成.grid-item.item1才能正确匹配
• 给所有.grid-item设置了固定高度height: 100px，会覆盖Grid布局的行高分配规则，导致跨两行的元素高度被限制，无法占满两行高度

修正后代码 #

CSS代码

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* 给容器设置固定高度让fr单位可以正常计算分配 */
  height: 210px;
}

.grid-item {
  background: blue;
}

.grid-item.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

HTML代码

<div class="grid-container">
  <div class="grid-item"> </div>
  <div class="grid-item item1"> </div>
  <div class="grid-item"> </div>
</div>

修正后就能实现左侧跨2行的大区域、右侧上下两个小区域的预期布局。

内容的提问来源于stack exchange，提问作者jpohnlmary