兼容性：https://www.caniuse.com/css-grid
Grid 布局是二维布局，可以同时对列和行进行操作
注意：设为 Grid 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
Grid Line 网格线
网格由网格线构成，网格线可以是水平的也可以是垂直的，下面例中的黄线就是一个列网格线。
image.png
Grid Area
网格区域由任意数量的网格单元组成， 下面例中的黄色区域就是一个网格区域。
image.png
grid-container 的属性
画网格
- grid-template-columns 每列的宽度
- grid-template-rows 每行的高度
设置列宽和行高
.grid_container{
display:grid;
grid-template-columns:10% auto 10%;
grid-template-rows:100px 100px auto 20px;
}
给网格线命名并设置列宽和行高
注意：一个网格线可以有多个名字
.grid_container{
display:grid;
grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];;
grid-template-rows:[row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
包含重复的部分，则可以使用 repeat() 简化写法
grid-template-columns: repeat(3, 20px) 30px;
/*上下两种写法等价*/
grid-template-columns: 20px 20px 20px 30px;
自由空间是在排除所有不可伸缩的 grid item 之后计算得到的，fr 单位能使轨道在自由空间中按比例伸展
grid-template-columns: 1fr 50px 1fr 1fr;
分配网格区域
grid-template-areas
header
main
image.png
grid-template 上面三个属性的简写
grid-template:
"header header header" 50px
". main sidebar" auto
"footer footer footer" 50px
/ 100px auto 100px;
隐式轨道宽度
隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
image.png
grid-auto-columns 隐式列宽
grid-auto-rows 隐式行高
grid-auto-columns: 60px;
image.png
自动布局
没有指明具体位置的 grid item 可以使用此属性自动布局
grid-auto-flow
JS Bin
item-a
item-b
item-c
item-d
item-e
image.png
当设置 grid-auto-flow: column 时
image.png
grid 以上所有属性的简写
语法：
grid: none |/ | [ [/ ]];
.container {
grid: 200px auto / 1fr auto 1fr;
}
/*上下两种写法等价*/
.container {
grid-template-rows: 200px auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: none;
}
.container {
grid: column 1fr / auto;
}
/*上下两种写法等价*/
.container {
grid-auto-flow: column;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
}
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
/*上下两种写法等价*/
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}
设置间距
grid-column-gap 设置列之间的间距
grid-row-gap 设置行之间的间距
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-gap 上面两个属性的简写
grid-gap: 10px 15px;
行/列对齐方式
justify-items 水平方向对齐方式
align-items 垂直方向对齐方式
网格对齐方式
justify-content 水平方向对齐方式
align-content 水平方向对齐方式
grid-items 的属性
确定 item 位置
grid-column-start 开始的列线
grid-column-end 结束的列线
列序从左往右是正数，从右往左是负数
span指定要跨越的网格数
grid-column-start: 3;
grid-column-end: 6;
grid-column 以上两个属性的简写
grid-column: 3 / span 2;
/*上下两种写法等价*/
grid-column: 3 / 6;
grid-row-start 开始的行线
grid-row-end 结束的行线
行序从上往下是正数，从下往上是负数
grid-row-start: 1;
grid-row-end: 4;
grid-row 以上两个属性的简写
grid-row: 1 / span 3;
/*上下两种写法等价*/
grid-row: 1 / 4;
grid-area
语法（上左下右）：
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area:2 / 3 / -2 /-1
item 自身对齐方式
justify-self 自身水平对齐
align-self 自身垂直对齐
order item展示顺序
默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数
JS Bin
item-a
item-b
item-c
item-d
item-e
image.png