使用CSS Grid实现首页模块化布局，通过定义容器和区域使结构清晰。首先设置display: grid，利用grid-template-columns、grid-template-rows和grid-template-areas划分网格并命名区域，子元素通过grid-area分配位置，提升语义性与维护性。响应式设计可通过媒体查询调整网格排列，如移动端垂直堆叠。结合fr、minmax()和gap属性优化弹性与间距，实现高效、自适应的复杂排版。
使用CSS Grid实现首页模块化布局，能让页面结构更清晰、响应式设计更简单。通过定义网格容器和项目，可以灵活控制各个模块的位置与尺寸，适合现代网页的复杂排版需求。
定义网格容器与基本结构
要开启Grid布局，首先在父容器上设置display: grid，然后通过grid-template-columns和grid-template-rows划分行列。
例如一个典型的首页可划分为头部、侧边栏、主内容区和底部：
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 80px auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"content content"
"footer footer";
height: 100vh;
}
其中grid-template-areas用命名区域直观描述布局，子元素通过grid-area对应位置。
立即学习“前端免费学习笔记（深入）”；
分配模块到网格区域
每个子模块设置grid-area属性，即可放入预设的区域名称中。
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.content { grid-area: content; }
.footer { grid-area: footer; }
这样代码语义清晰，维护方便。比如想把侧边栏移到右侧，只需调整grid-template-areas中的顺序，无需改动HTML结构。
响应式适配不同屏幕
在移动端，通常需要堆叠排列模块。利用媒体查询重新定义网格区域即可实现自适应。
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"content"
"footer";
}
}
此时所有区域垂直排列，适合小屏浏览。也可以结合minmax()和fr单位让列宽更具弹性，如grid-template-columns: minmax(200px, 1fr) 3fr;，使侧边栏最小200px，主内容区占剩余空间的三倍。
处理空白与间距控制
使用gap属性设置网格间的间距，替代传统的margin负值或浮动清零。
.container {
gap: 16px;
}
gap会自动在行与列之间插入空隙，避免外边距重叠问题，提升布局整洁度。若需跨多个网格单元，可用grid-column或grid-row指定跨度，如grid-column: 1 / -1;表示从第一列延伸到最后。
基本上就这些。合理运用Grid的命名区域、弹性单位和响应式断点，能高效构建结构清晰、易于维护的首页布局。关键在于先规划好视觉区块，再用CSS实现分离，不复杂但容易忽略细节。
