CSS：将4个同级元素定位为2列3行布局（无法修改HTML）

嘿，这种不能改HTML的布局需求确实有点棘手，但用CSS Grid就能完美解决，而且代码超简洁！

核心思路 #

利用CSS Grid的行列控制能力，不需要额外嵌套元素，直接给父元素和第一个子元素设置样式就能实现你要的布局：

.parent {
  display: grid;
  /* 把父元素宽度平分为两个等宽列 */
  grid-template-columns: 1fr 1fr;
  /* 可选：添加列间距让布局更美观 */
  gap: 10px;
}

.child1 {
  /* 让第一个子元素跨越3行，高度自动匹配右侧3个元素的总高度 */
  grid-row: span 3;
}

/* 可选：给子元素加基础样式，方便查看效果 */
.child1, .child2, .child3, .child4 {
  border: 1px solid #ddd;
  padding: 1.5rem;
  box-sizing: border-box;
}

方案优势 #

• 完全不需要修改现有HTML结构，完美适配你无法改动代码的场景
• Grid布局的行列划分逻辑清晰，右侧三个元素会自动在第二列从上到下垂直排列
• grid-row: span 3 能让第一个元素的高度自适应右侧三个元素的总高度，不管内容多少都能保持布局对齐
• 代码简洁易维护，后续调整布局只需要修改Grid相关属性即可

如果需要兼容更老的浏览器，也可以用浮动+绝对定位的组合方案，但Grid是目前最优雅的解决方式，建议优先使用。

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