CSS Grid 二维布局实战
CSS Grid 二维布局实战
Grid 是真正的二维布局系统，能同时控制行和列，做整页布局比 Flex 更直接。
三栏 + 页头页脚
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左固定 中自适应 右固定 */
grid-template-rows: 60px 1fr 40px;
gap: 16px;
min-height: 100vh;
}
.header { grid-column: 1 / 4; } /* 横向占满三列 */
.footer { grid-column: 1 / 4; }
fr 是剩余空间分配单位，多个 fr 按比例分；repeat(3, 1fr) 是重复三列的简写。
区域命名：像画图一样布局
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 40px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
模板字符串直接画出页面结构，调整布局只需改这一处，可读性极强。
实用技巧
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
/* 卡片网格：容器多宽就放多少列，每列最小 240px，自动响应式，无需媒体查询 */
子项定位：grid-column: span 2 让某个卡片跨两列；justify-items/align-items 控制单元格内对齐。
Grid 还是 Flex
- 只沿一个方向排列（导航栏、按钮组）→ Flex
- 需要同时规划行列、或整块页面骨架 → Grid
- 二者嵌套使用：Grid 搭页面骨架，内部组件用 Flex，是最顺手的组合
看到这里了？如果这篇文章帮到过你
请我喝瓶可乐就好 🥤
评论0 条
还没有评论，来抢沙发～