Grid布局通过display: grid创建容器，使用grid-template-columns/rows定义行列，gap设置间距，可借助网格线或grid-area进行元素定位，repeat()和minmax()实现响应式自动填充，grid-template-areas提升布局可读性，并通过align-items、justify-items等控制对齐，适合复杂二维页面结构。
Grid网格布局是CSS中最强大的布局系统之一，它能轻松实现二维布局（行和列），非常适合构建复杂的网页结构。相比Flexbox的一维布局，Grid更适合整体页面的划分。
1. 创建一个基本Grid容器
要启用Grid布局，先在父元素上设置display: grid或display: inline-grid。
示例：
.container {
display: grid;
}
此时子元素会自动成为网格项，并按默认方式排列（单列多行）。
立即学习“前端免费学习笔记（深入）”；
2. 定义行与列
使用grid-template-columns和grid-template-rows来定义列宽和行高。
常用单位：
px：固定尺寸fr：弹性比例单位（如1fr 2fr表示两列，比例为1:2）%：百分比auto：自适应内容大小
例子：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 50px;
}
这会创建两列（第一列占1份，第二列占2份）、两行（高度分别为100px和50px）。
3. 设置间距
用gap属性设置网格项之间的间距（替代旧的grid-gap）。
.container {
gap: 10px;
/* 可分别设置 */
row-gap: 10px;
column-gap: 20px;
}
推荐使用gap统一控制，简洁清晰。
4. 网格线与元素定位
Grid通过“网格线”编号来定位元素。可以手动指定某个项目从哪条线开始到哪条线结束。
关键属性：
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 
grid-column-start / grid-column-endgrid-row-start / grid-row-end简写：grid-column: 1 / 3; 表示从第1条线跨到第3条线（占两列）
例子：
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
该元素将横跨前两列，占据第一行。
5. 使用repeat()函数简化代码
当有多组重复的行列时，可用repeat()函数。
.container {
grid-template-columns: repeat(3, 1fr);
}
等价于1fr 1fr 1fr，创建三等分列。
还可结合其他值：repeat(2, 100px 1fr) 生成“100px+1fr”重复两次。
6. 自动填充与最小最大值（minmax）
使用repeat(auto-fill, …)或auto-fit让网格自动适应容器宽度。
.container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
含义：尽可能多地放入最小100px、最大1fr的列，自动换行。适合响应式卡片布局。
7. 网格模板区域（grid-template-areas）
通过命名区域直观设计布局，提升可读性。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 1fr 50px;
grid-template-areas:
“header header”
“sidebar main”
“footer footer”;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这种方式让布局结构一目了然，适合复杂页面如后台管理界面。
8. 对齐方式
Grid提供多种对齐控制：
justify-items：横向对齐网格项（start | end | center | stretch）align-items：纵向对齐justify-content：当总网格小于容器时，整体水平对齐align-content：垂直方向的整体对齐place-items：同时设置align-items和justify-items
基本上就这些核心用法。掌握Grid后，你会发现传统浮动、定位的复杂布局变得异常简单。建议多动手练习，比如尝试重构一个传统布局为Grid实现，理解更深刻。
以上就是css grid网格布局基础详解与使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1056321.html
微信扫一扫 
支付宝扫一扫 
