文章目录前言一、Grid 布局是什么二、高频简写属性必掌握日常开发优先使用2.1 grid示例1直接定义行列尺寸示例2自动按列填充隐式网格示例2.2行优先紧凑填充示例3区域命名排版2.2 gap原 grid-gap示例1行列间距相同示例2分开设置行、列间距先行间后列间2.3 grid-area示例1数字定位跨区示例2区块命名2.4 grid-template示例1定义行列尺寸示例2区域布局和 grid-template-areas 完全等效2.5 place-content示例1行列统一居中示例2垂直靠上水平靠右垂直在前水平在后2.6 place-items示例1全部单元格内容居中示例2单元格内垂直居上水平居右2.7 place-self示例1单个格子内容居中示例2单个格子垂直靠上、水平靠右2.8 grid-column / grid-rowgrid-column 示例grid-row 示例三、配套辅助函数与属性熟悉原理高频搭配简写使用3.1 grid-template-areas3.2 grid-auto-columns / grid-auto-rows3.4 auto-fill / auto-fit3.5 minmax(min, max)3.6 repeat()3.7 grid-auto-flow四、完整拆分原生属性了解即可日常优先简写4.1 轨道尺寸4.2 单元格间距4.3 单元格列定位4.4 单元格行定位4.5 整体网格对齐4.6 单个格子自身对齐4.7 全部单元格统一对齐前言本文是个人 CSS Grid 布局学习笔记用于日常复习查阅内容侧重实操简写与核心用法若有疏漏、错误欢迎指正。Grid 布局称得上现阶段功能最全面、能力最强的 CSS 二维布局方案。本文偏向个人总结笔记不适合零基础纯入门学习。参考学习资料通过玩游戏学习代码 Grid 互动教程阮一峰 Grid 布局完整教程菜鸟教程 CSS Grid 属性手册下文包含大量代码示例可直接复制调试方便直观理解属性效果一、Grid 布局是什么Grid 和 Flex 经常拿来对比但二者定位差异明显Flex 属于一维布局只能控制单轴横向 / 纵向排布更适合导航栏、按钮组这类局部小型组件Grid 属于二维布局可同时控制行、列两个维度专门适配页面整体版式、多栏复杂排版。两者不存在竞争冲突项目里经常搭配使用。虽然 Flex 勉强能实现大面积页面布局但代码繁琐、灵活性远不如 Grid。二、高频简写属性必掌握日常开发优先使用2.1 grid复合简写属性可一次性定义grid-template-rows/grid-template-columns/grid-template-areas/grid-auto-rows/grid-auto-columns/grid-auto-flow。限制同一条grid简写中不能同时混合显式网格与隐式网格配置。示例1直接定义行列尺寸grid:100px 150px /repeat(3,1fr);/* 等价拆分写法 */grid-template:100px 150px /repeat(3,1fr);/左侧代表行高右侧代表列宽。示例2自动按列填充隐式网格auto-flow写在/右侧 自动布局方向为列同时设置隐式列宽度grid:100px 150px / auto-flow 100px;/* 等价拆分 */grid-template-rows:100px 150px;grid-auto-flow:column;grid-auto-columns:100px;示例2.2行优先紧凑填充auto-flow dense写在/左侧 按行排布 紧凑算法填充空白同时定义隐式行高grid:auto-flow dense 100px / 1fr 2fr;/* 等价拆分 */grid-auto-flow:row dense;grid-auto-rows:100px;grid-template-columns:1fr 2fr;示例3区域命名排版直接通过字符串划分页面区块对应grid-template-areasgrid:header header header header headermenu main main main right rightmenu footer footer footer footer;/* 等价拆分 */grid-template-areas:header header header header headermenu main main main right rightmenu footer footer footer footer;2.2 gap原 grid-gap控制网格行、列单元格之间的间距是row-gapcolumn-gap的简写。规范更新说明旧前缀grid-gap/grid-row-gap/grid-column-gap已废弃统一使用无前缀gap/row-gap/column-gap。示例1行列间距相同gap:10px;/* 等价 */row-gap:10px;column-gap:10px;示例2分开设置行、列间距先行间后列间gap:20px 30px;/* 等价 */row-gap:20px;column-gap:30px;2.3 grid-area作用分两类1. 定位单元格占用的行列范围2. 给网格项命名配合grid-template-areas分区布局。示例1数字定位跨区语法行起始 / 列起始 / 行结束 / 列结束grid-area:1 / 1 / 4 / 5;/* 等价拆分 */grid-row:1 / 4;grid-column:1 / 5;示例2区块命名grid-area:header;/* 给当前格子命名为 header容器通过 grid-template-areas 引用该名称排版 */2.4 grid-template简写grid-template-rowsgrid-template-columns也支持区域字符串写法。示例1定义行列尺寸/前为行/后为列grid-template:100px 1fr auto / min-content max-contentminmax(200px,1fr);/* 等价拆分 */grid-template-rows:100px 1fr auto;grid-template-columns:min-content max-contentminmax(200px,1fr);示例2区域布局和 grid-template-areas 完全等效grid-template:header header header header headermenu main main main right rightmenu footer footer footer footer;2.5 place-content简写align-content整体网格垂直对齐justify-content整体网格水平对齐控制整个网格容器在父空间内的位置。示例1行列统一居中place-content:center;/* 等价 */align-content:center;justify-content:center;示例2垂直靠上水平靠右垂直在前水平在后place-content:start end;/* 等价 */align-content:start;justify-content:end;2.6 place-items简写align-itemsjustify-items统一控制所有单元格内部元素的对齐方式。示例1全部单元格内容居中place-items:center;/* 等价 */align-items:center;justify-items:center;示例2单元格内垂直居上水平居右place-items:start end;/* 等价 */align-items:start;justify-items:end;2.7 place-self简写align-selfjustify-self单独修改某一个网格项内部的对齐优先级高于 place-items。示例1单个格子内容居中place-self:center;/* 等价 */align-self:center;justify-self:center;示例2单个格子垂直靠上、水平靠右place-self:start end;/* 等价 */align-self:start;justify-self:end;2.8 grid-column / grid-row分别简写行列起止位置支持span关键字快速设置跨行列数量。grid-column 示例示例1从第1列开始到第4列之前结束占据1、2、3三列grid-column:1 / 4;/* 等价 */grid-column-start:1;grid-column-end:4;示例2第2列开始横向跨越2列grid-column:2 / span 2;grid-row 示例示例3从第1行开始占据1、2、3三行grid-row:1 / 4;/* 等价 */grid-row-start:1;grid-row-end:4;示例4第2行开始纵向跨越2行grid-row:2 / span 2;三、配套辅助函数与属性熟悉原理高频搭配简写使用3.1 grid-template-areas配合子项grid-area完成页面分区布局。书写规则每一行布局用一对单引号包裹区块名空格分隔.代表空白占位单元格不分配任何网格项。3.2 grid-auto-columns / grid-auto-rows引用阮一峰老师原文解释当网格项定位超出显式定义的行列范围时浏览器会自动生成隐式网格轨道来容纳元素。这两个属性专门用来设置自动新增轨道的宽高语法和 grid-template-columns / grid-template-rows 完全一致。若不手动定义浏览器会根据单元格内容自适应宽高。3.4 auto-fill / auto-fit二者配合repeat()实现自适应多栏布局容器宽度充足时才有明显区别auto-fill尽可能生成空轨道填充整行剩余空间留白auto-fit自动收缩空轨道把剩余空间平均分配给现有网格项。3.5 minmax(min, max)区间尺寸函数接收两个参数最小值、最大值限制轨道尺寸浮动范围。例minmax(200px, 1fr)代表轨道最小不低于200px最大自适应剩余空间。3.6 repeat()批量生成重复轨道接收两个参数重复规则数字固定重复次数/ auto-fill / auto-fit轨道尺寸支持像素、百分比、fr、auto、min-content、max-content、minmax()多组尺寸可空格隔开。示例repeat(3, 1fr 100px min-content)3.7 grid-auto-flow控制超出轨道的网格项自动填充规则row默认先行填满自动新增行column先列填满自动新增列dense开启紧凑填充算法填补前面出现的空白格子可能打乱元素原始顺序row dense按行排布 紧凑填充空白column dense按列排布 紧凑填充空白。四、完整拆分原生属性了解即可日常优先简写简写底层对应的完整原生属性遇到特殊定制需求时再单独使用4.1 轨道尺寸grid-template-rows / grid-template-columns4.2 单元格间距row-gap / column-gap4.3 单元格列定位grid-column-start / grid-column-end4.4 单元格行定位grid-row-start / grid-row-end4.5 整体网格对齐justify-content / align-content4.6 单个格子自身对齐justify-self / align-self4.7 全部单元格统一对齐justify-items / align-items
