grid布局（最详细介绍）

Grid 容器属性

属性	说明	示例
display: grid	将元素定义为网格容器	display: grid;
grid-template-columns	定义列的数量和宽度	grid-template-columns: 100px 200px 1fr;
grid-template-rows	定义行的数量和高度	grid-template-rows: 100px auto 100px;
grid-template-areas	使用命名区域创建布局	grid-template-areas: "header header" "main sidebar" "footer footer";
grid-template	简写属性，组合列、行和区域	grid-template: "header header" 50px "main sidebar" 1fr "footer footer" 30px / 1fr 200px;
grid-column-gap	定义列之间的间距	grid-column-gap: 10px;
grid-row-gap	定义行之间的间距	grid-row-gap: 10px;
grid-gap	简写属性，组合行和列的间距	grid-gap: 10px 20px;
justify-items	定义网格项在单元格内的水平对齐	justify-items: start; justify-items: end; justify-items: center; justify-items: stretch;
align-items	定义网格项在单元格内的垂直对齐	align-items: start; align-items: end; align-items: center; align-items: stretch;
justify-content	定义整个网格内容在容器内的水平对齐	justify-content: start; justify-content: end; justify-content: center; justify-content: stretch; justify-content: space-between; justify-content: space-around;
align-content	定义整个网格内容在容器内的垂直对齐	align-content: start; align-content: end; align-content: center; align-content: stretch; align-content: space-between; align-content: space-around;
grid-auto-columns	定义隐式生成的网格项列的宽度	grid-auto-columns: 100px;
grid-auto-rows	定义隐式生成的网格项行的高度	grid-auto-rows: 100px;
grid-auto-flow	定义自动布局算法的排列方式	grid-auto-flow: row; grid-auto-flow: column;

Grid 项目属性

属性	说明	示例
grid-column-start	定义网格项的起始列	grid-column-start: 2;
grid-column-end	定义网格项的结束列	grid-column-end: 4;
grid-row-start	定义网格项的起始行	grid-row-start: 1;
grid-row-end	定义网格项的结束行	grid-row-end: 3;
grid-column	简写属性，定义起始和结束列	grid-column: 1 / 3;
grid-row	简写属性，定义起始和结束行	grid-row: 2 / 4;
grid-area	简写属性，定义起始行、结束行、起始列和结束列	grid-area: 1 / 2 / 3 / 4;
justify-self	定义单个网格项在单元格内的水平对齐	justify-self: start;
align-self	定义单个网格项在单元格内的垂直对齐	align-self: start;

grid-template-columns 定义列的数量和宽度

写法	描述
grid-template-columns: 100px 200px 150px;	创建三列，分别宽度为 100px、200px 和 150px。
grid-template-columns: 20% 30% 50%;	创建三列，宽度分别占据父容器宽度的 20%、30% 和 50%。
grid-template-columns: 1fr 2fr 1fr;	创建三列，中间列宽度是两侧列宽度的两倍。
grid-template-columns: repeat(3, 1fr);	创建三列，每列宽度相等，都为 1fr。
grid-template-columns: 100px 1fr 20%;	第一列固定宽度为 100px，第二列占据剩余空间的比例为 1:1，第三列占据父容器宽度的 20%。
grid-template-columns: minmax(100px, 1fr) 200px minmax(150px, auto);	第一列宽度至少为 100px，最多为剩余空间的 1fr；第二列宽度固定为 200px；第三列宽度至少为 150px，但可以根据内容自动调整。
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));	自动填充尽可能多的列，每列最小宽度为 200px，但不超过可用空间，使用 1fr 分配剩余空间。