grid基本没有使用过，做项目一般使用的都是flex布局。前两天在牛客上看见一个关于grid的面试题。所以现在来复习一个grid布局。
什么是grid布局
Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分 成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，Grid 布局远比 Flex 布 局强大。 因为他可以把每个盒子任意排放到理想的位置。
但是兼容性和flex相比就差一些了。可以通过can i use查看兼容性
核心内容
- 容器属性
- 项目属性
容器属性
grid-template-columns
你想要多少列，就填写相应元素占的列宽，不填写，自动分配，占满整个容器。
grid-template-colums: 100px 100px 100px;
repeat(num, width)来指定个数和宽度。
grid-template-colums: repeat(3, 100px);
其中repeat第一个参数值还可以是auto-fill,表示容器没有设置宽高时，然后元素宽高固定，然后容器自动撑开，直到一行的空间不能剩下一个元素为止，然后换行展示。
grid-template-colums: repeat(auto-fill, 100px);
- fr单位每个定义了
flex的网格轨道会按比例分配剩余的可用空间。会按照指定的每份进行对父容器的分配。
grid-template-columns: 1fr 2fr 3fr;
- 百分比单位 他是根据容器宽度和高度分配的。
grid-template-rows: 10% 30% 50%; grid-template-columns: 10% 30% 50%;
- minmax()属性是一个来定义大小范围的属性，大于等于min值，并且小于等于max值。如果max值小于min值，则该值会被视为min值。最大值可以设置为网格轨道系数值
<flex>即fr单位，但最小值则不行。
grid-template-columns: 1fr minmax(500px, 2fr);
- min-content属性 是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
- max-content属性 是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
- auto属性。让列宽自动分配宽度。如果该网格轨道为最大时，该属性等同于
<max-content>，为最小时，则等同于<min-content>。
- 网格线。 可以用方括号定义网格线名称，方便以后的引用。
grid-template-columns: [a1] 1fr [a2] 2fr [a3] 3fr [a4];
grid-template-rows
你想要多少行，就填写相应元素占的行高，不填写，自动分配，占满整个容器。
他的属性值和grid-template-colums一样的，下面来介绍一下注意事项。
如果同时指定grid-template-colums, grid-template-rows，元素不够展示行和列，那么默认列的优先级高于行。
如果定义的项的宽之和、高度值和大于容器定义的宽高，那么将超出容器。
width: 800px; height: 400px; grid-template-columns: 200px 300px 400px;
row-gap，即以前的grid-row-gap
设置行元素之间的间隙gutter 大小。
grid-template-rows: 100px 100px 100px 100px; grid-template-columns: 10% 30% 50%; row-gap: 10px;
从上面可以看出，如果间距加上元素高度大于容器高度，那么将会超出容器。所以一般用等比分陪的单位，即fr单位。因为他分配的是剩余的可用空间。
grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 10% 30% 50%; row-gap: 10px;
如果设置百分比单位时，他是依据容器的高度计算的。
column-gap，即以前的grid-colum-gap
设置列元素之间的间隙gutter 大小。
grid-template-rows: 100px 100px 100px 100px; grid-template-columns: 10% 30% 50%; column-gap: 70px;
设置间距，只会设置两个元素之间的，两边的元素不会设置。
如果设置百分比单位时，他是依据容器的宽度计算的。
gap，即以前的grid-gap
用来设置网格行与列之间的间隙gutters，该属性是row-gapand column-gap的简写形式。
width: 800px; height: 400px; grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 10% 30% 50%; gap: 10%;
grid-template-areas
一个区域由单个或多个单元格组成。
每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。 多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。
grid-template-areas: "a a a" "b c c" "b c c";
这个属性可以参考mdn, 便于理解。
区域不需要利用，则使用.表示区域的命名会影响到网格线。每个区域的起始网格线， 会自动命名为区域名-start，终止网格线自动命名为区 域名-end。
grid-template-areas: "a a ." "a a ." ". b c";
grid-auto-flow
元素的排列方式，默认情况下，元素是按照行依次排列的。精确指定在网格中被自动布局的元素怎样排列。
// grid-auto-flow: row; // 默认情况。横向依次排列。 grid-auto-flow: column;
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”， 即先填满第一行，再开始放入第二行 （就是子元素的排放顺序）。
它还可以设置一个特殊的值。dense。
- 该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。 这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
.container { display: grid; width: 800px; height: 400px; border: 5px solid orange; grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 100px 100px 100px; grid-auto-flow: dense; /* grid-auto-flow: row; */ /* grid-auto-flow: column; */ } .item1 { background: red; grid-column: 1 / 3; } .item2 { background: rgb(238, 235, 34); grid-column: 1 / 3; }
这个属性也可以指定两个属性值，第一个是column / row, 第二个值只能是dense。
grid-auto-flow: row dense;
justify-items
设置单元格内容的水平对齐方式。
justify-items: start;
该属性的值，请查看mdn
align-items
设置单元格内容的垂直对齐方式。
justify-items: start; align-items: center;
place-items
他是align-items和justify-items的简写方式。
/* 先垂直，后水平 */ place-items: center start;
justify-content
表示全部单元格相对容器的横向对齐方式。
justify-content: center;
align-content
表示全部单元格相对容器的纵向对齐方式。
grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; justify-content: center; align-content: center;
从上面可以看出，如果我们未指定单元格的宽度和高度，那么它将会被压缩，由内容撑开。
grid-template-rows: 100px 100px 100px 100px; // + grid-template-columns: 100px 100px 100px; justify-content: center; align-content: center;
place-content
他是align-content和justify-content的简写方式。
place-content: start center;
grid-auto-columns
设置多出来的元素单元格的列宽。
display: grid; width: 800px; height: 400px; border: 5px solid orange; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-columns: 60px; grid-auto-rows: 60px;
我们设置了10个元素，但是我们只设置了三行三列，所以会多出一个单元格。那么这个属性就会和列等宽，并且不能修改。
但是我们可以通过设置单元格的排列顺序，即grid-auto-flow属性，来让grid-auto-columns生效。
display: grid; width: 800px; height: 400px; border: 5px solid orange; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-columns: 60px; grid-auto-rows: 60px; grid-auto-flow: column;
grid-auto-rows
设置多出来的元素单元格的行高。
display: grid; width: 800px; height: 500px; border: 5px solid orange; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-columns: 60px; grid-auto-rows: 60px;
我们设置了10个元素，但是我们只设置了三行三列，所以会多出一个单元格。默认情况，他会占满剩余空间。但是我们可以设置该属性来指定该元素的高度。
