本文详解如何利用 css grid 构建响应式二维布局，将 a3 和 a4 垂直并排置于 a2 右侧，同时使 a1 横跨整行——精准复现目标视觉结构。
本文详解如何利用 css grid 构建响应式二维布局，将 a3 和 a4 垂直并排置于 a2 右侧，同时使 a1 横跨整行——精准复现目标视觉结构。
在传统 Flexbox 或浮动布局中，实现“一个宽列 + 右侧双垂直列”的二维排列往往需要嵌套容器或 hack 手段，而 CSS Grid 是专为这类复杂网格场景设计的现代解决方案。它允许我们声明式地定义行、列及项目定位，无需改变 HTML 结构即可完成精准布局。
✅ 正确布局逻辑解析（对照目标图）
-
.a1应横跨全部两列（顶部通栏标题）→ 使用grid-column: 1 / span 2 -
.a2占据左侧主内容区，且高度占满第2、3行 → 使用grid-row: 2 / span 2 -
.a3和.a4自动填入右侧第2行和第3行（Grid 默认按源顺序流式填充剩余格子）
? 推荐实现代码（精简、语义清晰、兼容性强）
.post-background {
text-align: center;
font-family: sans-serif;
padding: 100px 0; /* 替代原 flex 居中，更语义化 */
}
.post-area {
width: 80%;
height: 500px;
background: rgba(128, 0, 128, 0.1);
border: 5px solid purple;
display: grid;
grid-template-columns: 3fr 1fr; /* 左:右 = 75% : 25%，比例灵活可调 */
gap: 0.5em 5%; /* 行间距 0.5em，列间距 5%（响应式友好） */
margin: 0 auto; /* 水平居中 */
}
.a1 {
background: rgba(255, 0, 0, 0.5);
border: 5px solid red;
grid-column: 1 / span 2; /* 跨越全部列，强制顶行通栏 */
height: 75px;
display: flex;
align-items: center;
justify-content: center;
}
.a2 {
background: rgba(0, 0, 255, 0.5);
border: 5px solid blue;
grid-row: 2 / span 2; /* 占据第2行 + 第3行，撑高左侧 */
height: 350px; /* 配合总高 500px - a1(75px) - gap ≈ 350px */
display: flex;
align-items: center;
justify-content: center;
}
.a3, .a4 {
background: rgba(0, 255, 0, 0.5); /* a3 默认绿，a4 后续覆盖蓝青色 */
border: 5px solid green;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
}
.a4 {
background: rgba(0, 229, 255, 0.5);
border-color: rgb(0, 229, 255);
}<div class="post-background">
<div class="post-area">
<div class="a1"><h1>a1</h1></div>
<div class="a2"><h1>a2</h1></div>
<div class="a3"><h1>a3</h1></div>
<div class="a4"><h1>a4</h1></div>
</div>
</div>⚠️ 关键注意事项
-
不要混用
display: inline-block与 Grid：原代码中.a2/.a3/.a4的inline-block会干扰 Grid 的自动布局，必须移除； -
避免固定像素宽度冲突：
.post-area已设width: 80%，其子项无需再设width: 99.2%等值，Grid 会按列模板自动分配； -
gap优于margin：使用gap控制网格间距更可靠，避免margin-left引发的计算偏差和响应式断裂； - 浏览器支持：现代浏览器（Chrome 57+, Firefox 52+, Safari 10.1+）均原生支持 Grid，无需前缀。
✅ 总结
CSS Grid 不仅解决了“两 div 并排于另一 div 右侧”的具体需求，更提供了面向未来的布局范式：结构与样式解耦、二维控制精准、响应式扩展自然。相比嵌套 Flexbox 或浮动方案，它代码更少、可维护性更高、视觉意图更明确。从今天起，遇到多区域对齐问题，请优先思考 Grid —— 它就是为此而生。
