CSS Grid 布局通过定义容器、行列、间距和项目定位实现二维布局。1. 设置 display: grid 启用布局；2. 用 grid-template-columns/rows 定义列宽行高，支持 fr 单位；3. 使用 gap 控制间距；4. 通过 grid-column/row 或 span 指定项目位置；5. grid-area 简写四边界；6. grid-template-areas 创建命名区域直观布局；7. repeat() 结合 auto-fit/minmax() 实现响应式网格。掌握这些可高效构建复杂页面结构。
CSS Grid 布局是一种二维布局系统，适合将页面划分为多个行和列组成的网格结构。它非常适合构建复杂的网页布局，比如仪表盘、卡片列表或响应式页面。以下是 Grid 布局的基础使用方法。
1. 定义网格容器
要启用 Grid 布局，先在父元素上设置 display: grid 或 display: inline-grid：
.container { display: grid;}
这个容器内的所有直接子元素会自动成为网格项（grid items）。
2. 设置行和列
使用 grid-template-columns 和 grid-template-rows 来定义网格的列宽和行高。
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-columns: 100px 200px 1fr; grid-template-rows: 50px 100px;}
上面代码表示：三列，宽度分别为 100px、200px 和剩余空间；两行，高度为 50px 和 100px。
fr 单位表示“可用空间的一部分”，1fr 就是一份。
3. 网格间距
使用 gap 属性设置网格项之间的间距（推荐方式）：
.container { gap: 10px; /* 行和列的间距 */ /* 或分开写 */ row-gap: 10px; column-gap: 20px;}
4. 网格线与项目定位
每个网格线都有编号，从 1 开始。可以使用 grid-column 和 grid-row 控制项目跨越的位置。
.item { grid-column: 1 / 3; /* 从第1条线开始，跨到第3条线（占两列） */ grid-row: 1 / 2; /* 占第一行 */}
也可以用 span 表示跨越数量：
jquery插件库合集
pui 是一款基于jQyery开发的插件库。目前线上稳定使用已有2年多，丰富的接口，简单明了的调用方式，灵活的回调函数，让您轻轻松松打造出富有灵活交互的Web前端界面解决方案。插件库封装了布局、表单元素、表单校验、弹窗、toast、气泡pop、tab切换、日历时间、分页、表格、树、css命名等功能
124 查看详情
.item { grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */}
5. 简写属性 grid-area
grid-area 可以一次性定义项目的四个边界：
.item { grid-area: 1 / 2 / 3 / 4; /* 意思是：row-start / col-start / row-end / col-end */}
6. 使用命名区域布局
可以用 grid-template-areas 创建可视化布局结构：
.container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 60px 1fr 50px; grid-template-columns: 200px 1fr;}.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }
这种方式更直观，适合整体页面结构设计。
7. 自动填充与重复
使用 repeat() 函数简化重复的列或行定义：
.container { grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */ /* 等价于 1fr 1fr 1fr */}
结合 auto-fit 或 auto-fill 实现响应式网格：
.container { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
这会让容器根据可用空间自动排列最小 150px 的列，并填满空间。
基本上就这些。掌握这些基础后，Grid 能帮你快速搭建灵活、响应式的布局结构。不复杂但容易忽略细节，多试几次就能熟练。
以上就是css grid布局基础使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1062817.html
微信扫一扫 
支付宝扫一扫 
