如何实现元素可缺省、高度可变的响应式交替双列网格？

你遇到的浮动布局错位问题，本质是浮动依赖文档流的特性导致的——当元素高度不固定或者部分元素缺失时，很容易打破预期的排列结构。而CSS Grid正是解决这种复杂网格布局的最佳方案，它能精准控制每个元素的位置，即使元素3或5不存在，也不会影响其他元素的布局。

实现思路 #

1. 用grid-template-columns定义两列布局（40% + 60%，和你之前的宽度一致）
2. 用grid-template-areas给每个元素分配专属的网格区域，这样不管元素是否存在，区域位置都会保留
3. 无需改变HTML结构，直接通过CSS定位每个.section元素

完整代码示例 #

HTML结构（和你原来的一致，无需修改）

<div class="panel">
  <div class="section three">3</div>
  <div class="section left one">1</div>
  <div class="section four">4</div>
  <div class="section left two">2</div>
  <div class="section five">5</div>
</div>

CSS代码

.panel {
  background: white;
  box-sizing: border-box;
  display: grid;
  /* 定义两列，宽度和你原来的保持一致 */
  grid-template-columns: 40% 60%;
  /* 定义网格区域，对应每个元素的位置 */
  grid-template-areas:
    "one three"
    "one four"
    "two four"
    "two five";
  /* 可选：添加元素间距，根据需求调整 */
  gap: 0;
}

/* 给每个元素分配对应的网格区域 */
.section.one {
  grid-area: one;
  background: green;
  height: 80px;
}
.section.two {
  grid-area: two;
  background: blue;
  height: 70px;
}
.section.three {
  grid-area: three;
  background: red;
  height: 20px;
}
.section.four {
  grid-area: four;
  background: brown;
  /* 这里可以不用固定高度，Grid会自动适配内容高度 */
  min-height: 90px;
}
.section.five {
  grid-area: five;
  background: yellow;
  height: 50px;
}

/* 响应式适配：小屏幕下改成单列布局 */
@media (max-width: 768px) {
  .panel {
    grid-template-columns: 100%;
    grid-template-areas:
      "one"
      "three"
      "two"
      "four"
      "five";
  }
}

关键优势 #

• 元素缺失不影响布局：如果去掉元素3或5，其他元素会自动填充对应的网格区域，不会出现错位
• 高度自适应：不管元素高度如何变化，Grid都会保持网格结构的完整性
• 响应式友好：只需修改grid-template-columns和grid-template-areas就能轻松适配不同屏幕尺寸

你可以直接替换原来的CSS代码，就能实现你想要的布局效果啦！

内容的提问来源于stack exchange，提问作者Alba Herrerías