CSS Grid

• 总结归纳一下grid布局的一些属性。

1. 容器continer属性：

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
div {
  display: inline-grid;
}

//可以有以下写法
grid-template-columns: repeat(2, 100px 20px 80px);//100px:1,4;20px:2,5;80px:3,6
grid-template-columns: repeat(auto-fill, 100px);//每个单元格自动填充
grid-template-columns: 100px auto 100px;//由浏览器自己决定长度，该列单元格的最大宽度
grid-template-columns: 1fr 1fr;
grid-template-columns: 150px 1fr 2fr;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];//网格线的名称

//行列间距
row-gap: 20px
column-gap: 20px
gap: <row-gap> <column-gap>;//简写


//单元格命名
grid-template-areas: 'a b c'
                    'd e f'
                    'g h i';
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';                     
    

// colunm:先列后行 排列
// row(默认):先行后列 排列
// dense:尽可能紧密填满，尽量不出现空格
grid-auto-flow: column | row | row dense | column dense;

//设置单元格内容的水平/垂直位置
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;//简写

//整个内容区域在容器里面的水平位置 
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
//space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content: <align-content> <justify-content>//简写

//有时候，一些项目的指定位置，在现有网格的外部:
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;//多余网格的行宽
grid-auto-columns: 50px;//多余网格的列宽

2. 项目item属性

//指定item所占范围
grid-column-start: 1 //垂直网格线第1根
grid-column-end: 2 //垂直网格线第2根

grid-row-start: 3 //水平网格线第3根
grid-row-end: 4//水平网格线第4根

grid-column-start: span 2;//表示"跨越"多少个网格
grid-column: <start-line> / <end-line>;//简写
grid-row: <start-line> / <end-line>;//简写


//grid-area
#container{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c'
                    'd e f'
                    'g h i';
}
.item-1 {
  grid-area: e;//.item-1位于中心为
}

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;//简写

//指定某一个单元格的水平/垂直位置
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;//简写

自己写过的grid轮子源码
自己写过的grid轮子使用文档
总结来自：阮一峰CSS Grid 网格布局教程