Basic Concepts
Grid Container

在需要的容器上定义display: grid | inline-grid 即可,这样在这个容器下的第一级子元素就会变成grid items

One
Two

I have some more content in.

This makes me taller than 100 pixels.

Three
Four
Five
Grid Tracks

tracks就相当于table中的行和列,下面通过定义 grid-template-columns: repeat(3, 1fr);定义了一个3列的grid,以及grid-auto-rows: minmax(100px, auto); 来根据当前的子项目的个数来确定有多少行

One
Two

I have some more content in.

This makes me taller than 100 pixels.

Three
Four
Five

使用明确的行数和列数来确定这个网格的布局

One
Two
Three
Four
Five
Grid Lines

如果通过grid-template-columns以及grid-template-rows,那么就隐式地确定了每条线,分别从上到下为column 从左到右(或者从右到左)为row,编号分别从小到达(1, 2, 3, 4, 5...)

One
Two

I have some more content in.

This makes me taller than 100 pixels.

Three
Four
Five
Grid Cells

简单理解为table中的单元格

One
Two
Three
Four
Five
Six
Grid Areas

可以通过规定一个item的起始行和起始列来规定一个area注意:area必须为一个 规则的举行,而不能为一个类似于L形状的图形

One
Five
Six

配合grid-template-area使用

header
siderbar
main
Grid Gutters

类似于表格中的colspan以及rowspan

One
Two
Three
Four
Five
Six
Grid z-index

类似于position: absolute;绝对定位之后的层级,后面渲染的item会覆盖前面的,因此下例中的item为Two的会覆盖在One

One
Two
Three
Four
Five
Six

调整item1的index之后z-index: 2;,会看到item1会覆盖在item2上面

One
Two
Three
Four
Five
Six