在网页前端开发中，三列布局是非常经典的内容展示结构，当需要在某一列中再拆分出更小的列区域时，就需要用到嵌套三列布局。CSS Grid网格布局提供了原生的网格定义能力，不需要依赖浮动或者定位就能实现精准的网格划分，非常适合用来实现嵌套类的复杂布局结构。
基础页面结构搭建
首先我们需要先构建基础的HTML结构，外层容器定义为主网格，内层需要嵌套三列的区域单独定义子网格，整体结构清晰且语义明确。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid嵌套三列布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-grid">
<header class="header">页面头部</header>
<div class="content-area">
<div class="left-sidebar">左侧边栏</div>
<div class="main-content">
<!-- 这里是需要嵌套三列的区域 -->
<div class="nested-grid">
<div class="nested-col-1">嵌套列1</div>
<div class="nested-col-2">嵌套列2</div>
<div class="nested-col-3">嵌套列3</div>
</div>
</div>
<div class="right-sidebar">右侧边栏</div>
</div>
<footer class="footer">页面底部</footer>
</div>
</body>
</html>外层主网格样式定义
外层main-grid容器需要定义整体的页面布局结构，这里我们将页面分为头部、内容区、底部三个部分，内容区再拆分为左中右三列，整体使用grid-template-areas来划分区域更直观。
.main-grid {
display: grid;
/* 定义三行：头部高度、内容区自适应、底部高度 */
grid-template-rows: 80px 1fr 60px;
/* 定义三列：左侧边栏、主内容区、右侧边栏的宽度 */
grid-template-columns: 200px 1fr 200px;
/* 给区域命名，方便后续分配 */
grid-template-areas:
"header header header"
"left-sidebar main-content right-sidebar"
"footer footer footer";
min-height: 100vh;
gap: 10px;
padding: 10px;
background-color: #f5f5f5;
}
/* 区域对应样式 */
.header {
grid-area: header;
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #e8f4fd;
padding: 15px;
}
.main-content {
grid-area: main-content;
background-color: white;
padding: 15px;
}
.right-sidebar {
grid-area: right-sidebar;
background-color: #e8f4fd;
padding: 15px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}嵌套三列布局实现
主内容区的nested-grid容器就是我们需要实现嵌套三列的区域，我们只需要在这个容器上单独开启Grid布局，定义三列的宽度比例即可，外层网格不会影响内层的网格定义。
.nested-grid {
display: grid;
/* 三列宽度比例 1:2:1，也可以设置固定值 */
grid-template-columns: 1fr 2fr 1fr;
gap: 15px;
height: 100%;
}
.nested-col-1 {
background-color: #fff3e0;
padding: 15px;
border-radius: 4px;
}
.nested-col-2 {
background-color: #e8f5e9;
padding: 15px;
border-radius: 4px;
}
.nested-col-3 {
background-color: #fce4ec;
padding: 15px;
border-radius: 4px;
}响应式适配优化
在移动端等小屏幕设备上，嵌套三列布局可能需要调整为单列展示，我们可以通过媒体查询修改nested-grid的列定义，同时外层主网格也可以根据屏幕尺寸调整列宽。
/* 屏幕宽度小于768px时的适配 */
@media (max-width: 768px) {
.main-grid {
/* 内容区改为单列，侧边栏移到内容下方 */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"left-sidebar"
"right-sidebar"
"footer";
}
.nested-grid {
/* 嵌套三列改为单列展示 */
grid-template-columns: 1fr;
}
}核心知识点总结
- Grid布局支持嵌套使用，内层的网格容器不会影响外层的网格定义，各自独立控制自己的区域划分
- 使用
grid-template-areas可以直观划分页面区域，可读性比直接定义行列序号更高 fr单位可以实现列的弹性分配，不需要计算具体的像素值，适配性更好- 结合媒体查询可以轻松实现不同屏幕尺寸下的布局切换，不需要修改HTML结构
需要注意的是，Grid布局的兼容性在IE浏览器上支持较差，如果需要兼容旧版IE，建议配合使用降级方案，或者选择其他布局方式实现。