Grid布局适用于二维布局场景，1. 通过grid-template-columns实现左侧固定、右侧自适应的两栏布局；2. 利用repeat(auto-fit, minmax())创建响应式卡片网格，自动调整列数；3. 使用grid-template-areas构建头部、侧边栏、内容区和页脚的经典网页结构，布局清晰；4. Grid天然支持等高列，配合align-items可轻松实现内容垂直居中。这些实例展示了Grid在现代网页布局中的灵活性与强大功能。
Grid网格布局是CSS中最强大的布局工具之一，适合处理二维布局（行和列）。通过实际例子能更直观理解它的用法。以下是几个常见的Grid布局应用实例。
1. 基础两栏布局
实现一个左侧固定宽度、右侧自适应的两栏布局。
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 左侧200px，右侧占剩余空间 */
gap: 16px; /* 列间距 */
height: 100vh;
}
.sidebar {
background-color: #f0f0f0;
padding: 20px;
}
.main-content {
background-color: #d0e0f0;
padding: 20px;
}
HTML结构：
主内容区
2. 响应式卡片网格
创建一个在不同屏幕尺寸下自动调整列数的卡片布局。
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
}
说明： auto-fit配合minmax()让每张卡片最小250px，超出则换行，自动填充可用空间。
3. 经典网页布局（头部 + 侧边栏 + 内容 + 页脚）
使用grid-template-areas构建清晰的页面结构。
.layout {
display: grid;
height: 100vh;
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header { grid-area: header; background: #4a90e2; }
.sidebar { grid-area: sidebar; background: #f0f0f0; }
.main { grid-area: main; background: #fff; }
.footer { grid-area: footer; background: #ccc; }
每个区域通过grid-area分配位置，结构一目了然。
4. 等高布局与内容对齐
Grid天然支持等高列，无需额外计算高度。
.equal-height {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
align-items: center; /* 垂直居中内容 */
}
.left-box {
background: #ffeaa7;
padding: 20px;
}
.right-box {
background: #fab1a0;
padding: 20px;
}
即使左右内容长度不同，两列高度始终保持一致，且内部内容可轻松垂直居中。
基本上就这些常见用法。Grid布局灵活且语义清晰，特别适合复杂界面的搭建。掌握这几个实例后，可以组合出大多数现代网页布局需求。
