基本概念：
容器（container）——有容器属性
项目（items）——有项目属性
行（row)
列（column）
间距（gap) ——单元格之间的距离
区域（area）—— 自己划分每个单元格占据的区域
内容（content)
容器属性
1,
grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比
grid-template-rows:设置每一行的宽度，可以是具体值，也可以是百分比
repeat():第一个参数是重复的次数，第二个参数是所要重复的值
auto-fill：有时单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段）
minmax():函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
2
grid-column-gap
grid-row-gap
grid-gap(前两个的缩写）
表示项目相互之间的距离，新版本grid-前缀已经删除。
3
grid-template-areas
一个区域由单个或多个单元格组成，由自己决定（具体使用，需要在项目属性中设置）
区域不需要利用时，则使用“.”表示
区域的命名会影响到网络线，会自动命名为区域名-start，终止网格线自动命名为-end
4
grid-auto-flow:划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行（就是子元素的排放顺序）
grid-auto-flow：row;(先行后列)
grid-auto-flow:column;(先列后行）
利用dense属性可提高空间利用率。grid-auto-flow:row dense;
5
水平方向上：
justify-items:start|end|center|stretch;
justify-items:start; 起始方向对齐
竖直方向上：
align-items:start|center|end|stretch;
align-items:start; 起始对齐
6
justify-content（水平方向）/ align-content（垂直方向）
设置整个内容区域的水平和垂直的对齐方式
7
grid-auto-columns/grid-auto-rows
用来设置多出来的项目的宽和高
8
grid-column-start/grid-column-end
grid-row-start/grid-row-end
指定item的具体位置，根据在哪根网络线，在项目里设置
9
grid-area:指定项目放在哪一个区域
使用时要与容器属性grid-template-areas一起使用
10
justify-self/align-self
首先，水平方向上：
justify-self ：设置单元格内容的水平位置（左中右），和 justify-items属性的用法完全一致，但只作用于单个项目（水平方向）
容器的style
11
垂直方向上：
align-self：设置单元格内容的垂直位置（上中下），和align-items属性的用法完全一致，但只作用于单个项目（垂直方向）
align-self:start | end | center | stretch;
网友评论