CSS Grid布局

什么是Grid布局

Flex布局是轴线布局，可以看作是一维布局。Grid布局是将容器划分成“行”，“列”，产生网格效果，可以看做是二维布局。是CSS中最强大的布局方案。

基本概念

1. 容器：

2. 项目

容器属性

1. grid-template-columns         [列]
2. grid-template-rows            [行]
3. grid-row-gap                  [行 间距]
4. grid-column-gap               [列 间距]
5. grid-gap(3,4缩写）             
6. grid-template-areas           [划分区域]
7. grid-auto-flow                [项目排列方式]
8. justify-items                 [项目x排列方式]
9. align-items                   [项目y排列方式]
10. place-items(8，9缩写)         
11. justify-content              [内容区x位置]
12. align-content                [内容区y位置]
13. place-content(11，12缩写)     
14. grid-auto-columns            [多余项目宽]
15. grid-auto-rows               [多余项目高]

grid-template-columns

grid-template-columns: 100px 100px 100px; // 常规写法
grid-template-columns: repeat(3, 100px); // repeat函数
grid-template-columns: repeat(auto-fill, 100px); // 列宽固定，列数不固定，autofill将会自动分配容器宽度
grid-template-columns: repeat(3, 1fr); // fr代表不指定item宽度，根据列数平均分配
grid-template-columns: 1fr minmax(150px, 1fr); // minmax 指定的列宽范围，最小长度150px
grid-template-columns: 100px auto 100px; // auto 自适应剩余宽度

grid-template-areas

grid-template-areas: 'a b c'  // 划分区域
                     'd e f'
                     'g h i'
                     
grid-template-areas: 'a . c' // 不关心的部分可以用.代替
                     'd . f'
                     'g . i'
                     

grid-auto-flow

grid-auto-flow: column    // 纵排
                row       // 横排
                row dense // 横排空间放置放得下的元素

justify-items / align-items / place-items

justify-items: start | end | center | stretch | space-aroud | space-between | space-evenly;
place-items: center | center;

justify-content / align-content

justify-content: start | end | center | stretch | space-aroud | space-between | space-evenly; // 容器内容区的对齐方式

grid-auto-columns / grid-auto-rows

grid-auto-rows: 50px; // 用来设置多出来的项目宽高

项目属性

1. grid-column-start
2. grid-column-end
3. grid-column(1,2缩写)
4. grid-row-start
5. grid-row-end
6. grid-row(4,5缩写)
7. grid-area
8. justify-self
9. align-self
10. place-self(8,9缩写)

grid-column-start / grid-column-end / grid-column

grid-column-start: 1; // 根据网格线，从第一根，到第三根
grid-column-start: 3;
grid-column: 1/3;

grid-column-start: span 2; // 从开始方向，跨两条网格线
grid-column-end: span 2; // 从末尾方向，向开始方向，跨两条网格线

grid-area

grid-area: a; // 对应容器属性grid-template-area设置的区域
grid-area: 1/1/3/3; // 还可以作为以上项目属性grid-column-start，grid-column-end，grid-row-start，grid-row-end合并的简写形式，直接指定项目位置

总结

Grid布局属性众多，要想熟练掌握少不了要实际操作一下。