Grid布局

浏览器支持情况：

首先要声明使用的布局类型，注意在Grid布局里column, float, clear 和 vertical-align 不会生效。

.container {
  display: grid | inline-grid | subgrid;
}

1 grid-template-columns 表示每一行如何划分,grid-template-rows 表示每一列如何划分

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

屏幕快照 2018-01-10 15.33.29.png

可以给每一行列加上名字,名字可以多个。

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

如果有重复的地方可以使用repeat表示，以下两句意思一样。

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

可以使用fr来代表一部分

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 50px 1fr 1fr;
}

2 grid-template-areas

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

屏幕快照 2018-01-10 15.50.45.png

3 grid-template 是上面三个属性合并的简写，语法格式为

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

下面两种写法效果一样

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

4 grid-column-gap 和 grid-row-gap 表示每行每列之间的间隔

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

屏幕快照 2018-01-10 16.23.51.png

 重要的术语：
### Properties for the Grid Container:
grid-column-gap / grid-row-gap / grid-gap / justify-items / align-content / grid-auto-columns / grid-auto-rows / grid-auto-flow /grid 

### Properties for the Grid Items
grid-coulmn-start / grid-column-end / grid-row-start / grid-row-end / grid-column / grid-row / grid-area / justify-self / align-self

## Grid Container

### grid-template-columns / grid-template-rows
<track-size> / <line-name>
### grid-template-areas
<grid-area-name> / . / none
### grid-template
none / subgrid / <grid-template-rows> / <grid-template-columns>
### grid-column-gap / grid-row-gap
<line-size>
### grid-gap
<grid-row-gap> / <grid-column-gap>
### justify-items / align-items
start / end / center / stretch
### justify-content / align-content
start / end / center / stretch / space-around / space-between / space-evenly 
### grid-auto-columns / grid-auto-rows
<track-size>
### grid-auto-flow
row / column / dense