CSS Grid 网格布局

前言： iPhone13发布会被占领了热搜，小编就去逛了逛苹果官网，发现样式里有 grid 属性，就去查了查，完整的 阮一峰 CSS Grid 网格布局教程 献给大家~

通篇看下来跟 flex 布局很相像，但更强大一些。本人只是个人学习的笔记，如果有小白想系统的学习 Grid 网格布局 建议戳上面的链接去看阮一峰的文~

1. 父级容器属性

效果图

display: grid; // 像display: block
display: inline-grid; // 像display: inline-block

grid-template-columns: 100px 100px 100px; // 属性定义每一列的列宽 (绝对单位 百分比都可)
grid-template-rows: 100px 100px 100px; // 属性定义每一行的行高 (绝对单位 百分比都可)
// 或
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);

grid-template-columns: repeat(2, 100px 20px 80px); // repeat()重复某种模式也可

grid-template-columns: repeat(auto-fill, 100px); // 单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

grid-template-columns: 1fr 1fr; // 比例关系 后者是前者的两倍

grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 函数产生一个长度范围 最小值和最大

grid-template-columns: 100px auto 100px; // auto关键字表示由浏览器自己决定长度。

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // 给网格命名
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; // 给网格命名

间隙

row-gap: 20px; // 设置行与行的间隔（行间距）
column-gap: 20px; // 设置列与列的间隔（列间距）
gap: <grid-row-gap> <grid-column-gap>; // 合并简写
// 如果省略第二个值，则浏览器认为与第一个值相等。

纵向

grid-auto-flow: column; // 纵向排列
justify-items: start | end | center | stretch; // 单元格内容的水平位置（左中右）
align-items: start | end | center | stretch; // 单元格内容的垂直位置（上中下）
place-items: <align-items> <justify-items>; // 如果省略第二个值，则浏览器认为与第一个值相等。

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 整个内容区域在容器里面的水平位置（左中右）
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  // 整个内容区域的垂直位置（上中下）
place-content: <align-content> <justify-content> // 如果省略第二个值，则浏览器认为与第一个值相等。

指定位置

// grid-auto-columns属性和grid-auto-rows属性用来设置，
// 浏览器自动创建的多余网格的列宽和行高。
// 它们的写法与grid-template-columns和grid-template-rows完全相同。
// 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
grid-auto-rows: 50px; 

grid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>
grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>

---

2. 子集项目属性

grid-column-start: 2; // 左边框所在的垂直网格线
grid-column-end: 4; // 右边框所在的垂直网格线
grid-row-start: 2; // 上边框所在的水平网格线
grid-row-end: 4; // 下边框所在的水平网格线

grid-column-start: span 2; // 这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格

grid-column: <grid-column-start> / <grid-column-end>;
grid-row: <grid-row-start> / <grid-row-end>;

grid-area: e; // 指定项目放在哪一个区域
grid-area: <row-start> / <column-start> / <row-end> / <column-end>; // 还可以作为缩写

justify-self: start | end | center | stretch(拉伸 默认值); // 属性设置单元格内容的水平位置（左中右）
align-self: start | end | center | stretch; // 属性设置单元格内容的垂直位置（上中下）
place-self: <align-self> <justify-self>; // 如果省略第二个值，则浏览器认为与第一个值相等。