Grid 网格布局
CSS3引入的二维布局系统，可以同时控制行和列，实现复杂的页面结构。
核心属性
| 属性 | 说明 | 常用值 |
|---|---|---|
display: grid |
启用Grid布局 | grid / inline-grid |
grid-template-columns |
列宽定义 | 1fr / 200px / repeat() |
grid-template-rows |
行高定义 | 1fr / auto / 100px |
gap |
间距 | 10px / 1rem |
grid-column |
列位置 | span 2 / 1 / -1 |
应用场景
适用：页面整体布局、相册图库、仪表盘、数据表格、Dashboard
示意图
header
(1fr)
(1fr)
main
(2fr)
(2fr)
sidebar
(1fr)
(1fr)
footer (跨全部列)
grid-template-columns: 1fr 2fr 1fr
实际例子 - 相册图库
🖼️
🖼️
🖼️
🖼️
🖼️
🖼️
大图
🖼️
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.large {
grid-column: span 2;
grid-row: span 2;
}