display: grid是 CSS 中最强的二维布局方案同时控制行和列相比 Flex 布局一维仅控制行或列Grid 能更精准地划分页面区域、实现复杂的网格排版比如商品卡片、表单布局、页面整体框架等。术语含义通俗解释网格容器Grid Container设置了display: grid的元素比如div classcontainer是所有网格子项的 “父盒子”网格子项Grid Item网格容器的直接子元素容器里的div classitem只会影响直接子元素孙子元素不受控网格线Grid Line划分网格的横线 / 竖线比如 3 列网格有 4 条竖线编号 1、2、3、4用来定位子项位置网格单元格Grid Cell行和列交叉形成的最小单位类似表格的 “单元格”是网格的最小组成部分网格轨道Grid Track相邻两条网格线之间的区域横向叫「行轨道」行高纵向叫「列轨道」列宽网格区域Grid Area多个单元格合并的区域由任意数量的单元格组成可用来定义大模块比如页眉、主体一. 开启 Grid 布局给父容器设置display: grid直接子元素就会变成网格子项/* 网格容器 */ .grid-container { display: grid; /* 核心开启网格布局 */ /* 可选inline-grid容器自身行内显示类似 inline-block */ /* display: inline-grid; */ } /* 网格子项无需额外设置默认自动排列 */ .grid-item { /* 子项样式比如背景、高度 */ }二. 定义列和行最核心的 2 个属性Grid 的核心是「划分列和行」常用grid-template-columns列和grid-template-rows行1固定尺寸像素 / 百分比.grid-container { display: grid; /* 定义3列宽度分别为100px、200px、100px */ grid-template-columns: 100px 200px 100px; /* 定义2行高度分别为80px、120px */ grid-template-rows: 80px 120px; gap: 10px; /* 单元格间距列行替代传统的 margin更方便 */ }2弹性尺寸fr 单位fr是 Grid 专属的 “份数单位”表示「剩余空间的占比」无需计算百分比自动平分容器需设高度fr 才生效.grid-container { display: grid; /* 3列每列占1份平分容器宽度 */ grid-template-columns: 1fr 1fr 1fr; /* 2行第一行1份第二行2份行高按比例分配 */ grid-template-rows: 1fr 2fr; height: 300px; /* 容器需设高度fr 才生效 */ }3重复函数repeat ()避免重复写相同值简化代码比如 3 列每列 1fr.grid-container { display: grid; /* repeat(重复次数, 重复值)3列每列1fr */ grid-template-columns: repeat(3, 1fr); /* 混合写法2列固定100px后面3列各1fr */ grid-template-columns: 100px 100px repeat(3, 1fr); }4自适应尺寸minmax ()定义尺寸范围最小 / 最大结合auto-fit/auto-fill实现响应式.grid-container { display: grid; /* 自动适配列数每列最小250px最大1fr自适应 */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }三、常用属性按场景分类好记1. 容器属性给 grid 容器加的属性作用示例grid-template-columns定义列数和列宽1fr 2fr/repeat(3, 100px)/minmax(200px, 1fr)grid-template-rows定义行数和行高同列属性只是控制行gap简写单元格间距列 行10px/10px 20px列间距 10行间距 20grid-column-gap仅列间距gap 拆分版10pxgrid-row-gap仅行间距gap 拆分版20pxjustify-items子项在单元格内「水平对齐」start/center/end/stretch默认拉伸align-items子项在单元格内「垂直对齐」同 justify-itemsplace-items简写垂直 水平对齐center center居中justify-content整个网格在容器内「水平对齐」网格总宽度容器宽度时生效center/space-between/space-aroundalign-content整个网格在容器内「垂直对齐」网格总高度容器高度时生效同 justify-contentgrid-template-areas给网格区域命名快速布局见下方实战示例2. 子项属性给 grid 子项加的用来精准定位单个子项比如让某个子项跨多行 / 多列属性作用示例grid-column-start/grid-column-end子项跨列按网格线编号grid-column: 1 / 3从第 1 条竖线到第 3 条跨 2 列grid-row-start/grid-row-end子项跨行按网格线编号grid-row: 2 / 4跨 2 行grid-column跨列简写1 / span 2从第 1 列开始跨 2 列grid-row跨行简写2 / span 3从第 2 行开始跨 3 行grid-area定位子项对应命名的区域header对应 grid-template-areas 的 headerjustify-self单个子项水平对齐覆盖容器的 justify-itemscenteralign-self单个子项垂直对齐覆盖容器的 align-itemscenter四、实战示例2 个高频场景直接复用场景 1响应式卡片网格实现 “屏幕宽多列、屏幕窄少列” 的自适应卡片无需媒体查询div classcard-container div classcard卡片1/div div classcard卡片2/div div classcard卡片3/div div classcard卡片4/div /div style .card-container { display: grid; /* 核心自适应列数每列最小250px最大平分空间 */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; /* 卡片间距 */ padding: 20px; } .card { height: 200px; background: #409eff; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; } /style场景 2页面整体布局页眉 侧边栏 主体 页脚:用 Grid 快速搭建页面框架比 Flex 更简单div classpage-container header页眉/header aside侧边栏/aside main主体内容/main footer页脚/footer /div style .page-container { display: grid; /* 定义列侧边栏200px主体占剩余 */ grid-template-columns: 200px 1fr; /* 定义行页眉60px主体1fr页脚60px */ grid-template-rows: 60px 1fr 60px; /* 给区域命名对应子项的 grid-area */ grid-template-areas: header header /* 页眉跨2列 */ aside main /* 侧边栏主体 */ footer footer; /* 页脚跨2列 */ height: 100vh; /* 占满视口高度 */ gap: 10px; } header { grid-area: header; /* 对应命名的 header 区域 */ background: #f56a00; color: #fff; display: flex; align-items: center; justify-content: center; } aside { grid-area: aside; background: #722ed1; color: #fff; display: flex; align-items: center; justify-content: center; } main { grid-area: main; background: #1890ff; color: #fff; display: flex; align-items: center; justify-content: center; } footer { grid-area: footer; background: #00a854; color: #fff; display: flex; align-items: center; justify-content: center; } /style五、Grid vs Flex怎么选布局类型推荐方案示例一维布局仅排一行 / 一列Flex导航栏、按钮组、单行文字居中二维布局同时控制行 列Grid商品卡片、页面框架、表单、相册响应式网格自适应列数Gridauto-fit minmax卡片列表、图片画廊子项跨多行 / 多列Grid不规则布局、合并单元格六、兼容性 注意事项兼容性现代浏览器Chrome/Firefox/Edge/Safari 10都支持无需前缀移动端也兼容子项默认行为Grid 子项默认是「块级元素」即使是span也会变成块级fr 单位仅在容器有固定高度 / 宽度时生效比如行高用 fr 需给容器设 heightauto-fit vs auto-fillauto-fit列数适配后子项会占满容器无空白auto-fill列数适配后会保留空白列适合固定列数的场景日常用auto-fit更实用。总结display: grid是 CSS 中最强大的布局方案核心优势是「二维控制」和「自适应网格」基础用法给容器加display: grid用grid-template-columns/rows定义行列响应式核心repeat(auto-fit, minmax(最小值, 1fr))实现无媒体查询的自适应进阶用法用grid-template-areas快速搭建页面框架用子项属性实现跨行列布局选型原则一维用 Flex二维用 Grid。