Grid Line
分界线：组成网格结构，它们是垂直或者水平
Grid Track
网格的列或者行
Grid Cell
网格的一个单元
Grid Area
四个网格线包围的总空间
父容器
display
.container { display: grid | inline-grid | subgrid;
}其他两个字面意思
subgrid 就是指如果本身就是要给grid item ， 可以使用这个属性来获取它的父节点的行/列的大小，而不是它自己的大小
gird-template-columns/grid-template-rows
空格代表网格线
.container { width: 400px; height: 300px; border: 1px solid red;
display: grid; gird-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;
}gird-template-columns/grid-template-rows
还可以给网格线命名，一个网格线可以不止一个名字，如下第二个网格线有两个名字
.container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}另外重复的地方还可以用repeat()来简化
.container { grid-template-columns: repeat(3, 20px [col-start]) 5%;
}上面等同于
.container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}"fr"允许将轨道大小设置为自由空间，如下则是将container除去50px后的空间分为1/3：
.container { grid-template-columns: 1fr 50px1fr 1fr;
}grid-template-areas
通过grid-area属性来命名网格区域的名称
<grid-area-name>- 使用 grid-area 属性设置的网格区域的名称.- 点号代表一个空网格单元none - 没有定义网格区域
.container { width: 400px; height: 300px; border: 1px solid red; display: grid; grid-template-columns: 50px 50px auto 50px; grid-template-rows: auto; grid-template-areas:
"header header header header"
"main main . aside"
"footer footer footer footer";
}.header { grid-area: header; background: red;
}.main { grid-area: main; background: blue;
}.aside { grid-area: aside; background: yellow;
}.footer { grid-area: footer; background: grey;
}会得到如下图
grid-template-areas
grid-template
在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。
.container { width: 400px; height: 300px; border: 1px solid red; display: grid;
/* grid-template-columns: 50px 50px auto 50px;
grid-template-rows: 50px auto 50px;
grid-template-areas:
"header header header header"
"main main . aside"
"footer footer footer footer"; */
grid-template:
"header header header header" 50px
"main main . aside" auto "footer footer footer footer" 50px
/ 50px 50px auto 50px;
}下面等价于上面
grid-column-gap / grid-row-gap
设置行列的缝隙
grid-column-gap: 10px; grid-row-gap: 15px;
grid-gap
上面的缩写grid-gap: 15px 10px;
justify-items / align-items / justify-content / align-content
用法和flex布局类似，暂不介绍
grid-auto-columns / grid-auto-rows
制定自动生成的轨道的大小
grid-auto-flow
如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目
grid
是所有的简写，和grid-template相似
子元素
grid-column-start / grid-column-end / grid-row-start /grid-row-end
<line>: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线
span <number>: 网格项将跨越指定数量的网格轨道
span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线
auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}grid-column / grid-row
上面的简写
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}例子：
.container { width: 400px; height: 300px; border: 1px solid red; display: grid;
grid: 50px auto 50px / 10% auto 10%;
}.header { grid-column: 1/ span 3; grid-row: 1; background: red;
}.main { grid-column: 2; grid-row: 2; background: blue;
}.aside { grid-column: 3; grid-row: 2; background: yellow;
}.footer { grid-column: 1/ 4; grid-row: 3; background: grey;
}子元素
grid-area
给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用
justify-self
沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）
align-self
沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）
作者：徐金俊
链接：https://www.jianshu.com/p/b2a87d05afec