用 CSS Grid 做响应式布局的一点心得（10-17）
【摘要】 做后台看板页面时，用 Grid 相比 Flex 省了不少代码，记几个实用写法。自适应卡片网格最常用的一行代码：```css.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;}````auto-fit` 会把空轨道折叠掉，让卡片自动撑满剩余空间；`mi...
做后台看板页面时，用 Grid 相比 Flex 省了不少代码，记几个实用写法。
自适应卡片网格
最常用的一行代码：
```css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
```
`auto-fit` 会把空轨道折叠掉，让卡片自动撑满剩余空间；`minmax(260px, 1fr)` 保证每列不小于 260px。窗口变窄时自动减列，不需要写媒体查询。
如果想保留空位（比如固定 3 列，不足时留白），把 `auto-fit` 换成 `auto-fill`。
主次分栏
侧栏固定、主区自适应：
```css
.layout {
display: grid;
grid-template-columns: 240px 1fr;
}
@media (max-width: 720px) {
.layout { grid-template-columns: 1fr; }
}
```
高度撑满的小坑
Grid 子项默认 `min-height: auto`，内容过长时不会滚动而是撑破容器。需要滚动时要显式写：
```css
.panel {
min-height: 0;
overflow: auto;
}
```
这个 `min-height: 0` 是 Flex/Grid 通用的"解除最小尺寸约束"技巧，遇到滚动失效先想到它。
小结
Grid 适合二维布局（行列同时控制），Flex 适合一维排列。二者不是替代关系，实际项目里混用最省事。前端开发
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）