在网页布局开发中，固定头部配合下方区域动态渲染子元素的需求十分普遍，CSS Grid布局凭借其二维布局能力，能够简洁高效地实现这类效果，不需要复杂的浮动或者定位嵌套逻辑。
核心实现思路
要实现固定头部和动态渲染子元素的布局，核心是利用CSS Grid的网格区域划分能力，将页面整体划分为头部区域和内容区域两部分，头部区域设置固定高度，内容区域占据剩余空间，同时内容区域内部再配置Grid规则来排列动态生成的子元素。
1. 基础Grid容器配置
首先需要将最外层容器设置为Grid布局，划分两个行轨道，第一行对应头部，第二行对应内容区域。头部的高度可以固定为合适的值，内容区域的高度设置为1fr，这样会自动占据剩余的全部垂直空间。
/* 最外层容器样式 */
.container {
display: grid;
/* 第一行固定60px高度，第二行占据剩余空间 */
grid-template-rows: 60px 1fr;
/* 整个容器的高度占满视口 */
height: 100vh;
width: 100%;
}
2. 固定头部样式设置
头部元素需要放置在第一个行轨道中，为了保证头部始终固定在顶部，不需要额外设置position: fixed，因为Grid布局的行轨道已经将头部和内容区域做了明确的划分，头部会始终保持在容器的最上方，不会随内容滚动而移动。
/* 头部样式 */
.header {
/* 可以设置背景色区分头部区域 */
background-color: #f5f5f5;
/* 内部内容居中显示 */
display: flex;
align-items: center;
justify-content: center;
/* 添加底部边框作为分隔 */
border-bottom: 1px solid #e0e0e0;
}
3. 动态子元素内容区域配置
内容区域需要再次设置为Grid布局，用来排列动态渲染的子元素。可以根据需求设置列轨道的规则，比如设置为自适应多列，当子元素数量变化时，Grid会自动调整排列位置。
/* 内容区域样式 */
.content {
/* 内容区域自身也使用Grid布局排列子元素 */
display: grid;
/* 列轨道：最小200px，最大1fr，自动填充 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 子元素之间的间距 */
gap: 16px;
/* 内容区域内边距 */
padding: 16px;
/* 内容过多时允许滚动 */
overflow-y: auto;
}
完整示例代码
以下是完整的HTML和CSS代码，模拟动态添加子元素的场景，点击按钮可以新增子元素，查看布局效果。
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-rows: 60px 1fr;
height: 100vh;
width: 100%;
}
.header {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid #e0e0e0;
}
.content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
overflow-y: auto;
}
.item {
background-color: #e8f4fd;
border-radius: 8px;
padding: 20px;
text-align: center;
border: 1px solid #b3d8fd;
}
.add-btn {
padding: 8px 16px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.add-btn:hover {
background-color: #337ecc;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span>固定头部区域</span>
<button class="add-btn" onclick="addItem()">添加子元素</button>
</div>
<div class="content" id="content">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
</div>
</div>
<script>
let count = 3;
function addItem() {
const content = document.getElementById('content');
const newItem = document.createElement('div');
newItem.className = 'item';
newItem.textContent = '子元素' + count;
content.appendChild(newItem);
count++;
}
</script>
</body>
</html>
注意事项
- 最外层容器的高度需要明确设置，比如设置为
100vh占满视口，否则1fr的计算会不符合预期。 - 内容区域如果需要支持滚动，必须设置
overflow-y: auto，否则子元素过多时会撑开容器，破坏固定头部的效果。 - 动态渲染子元素时，不需要额外修改Grid的配置，Grid会自动根据列轨道规则排列新增的子元素，兼容性较好。
这种实现方式相比于使用position: fixed固定头部，不需要处理头部脱离文档流带来的占位问题，布局逻辑更加清晰，维护成本更低。