Grid的写法

container内：

.container{
   display：grid | inline-grid;
}

grid-template-columns: 40px 50px auto 50px 40px ;   //五列
grid-template-rows:25% 100px auto ;   //三行

items内：

.item-a{
    grid-row-start:x;    //设置从第x行线开始
    grid-row-end:y;    //设置从第y行线结束
    grid-column-start:z;    //设置从第z列线开始
    grid-column-end:zz;     //设置从第zz列线结束
}

可缩写为：

grid-row:x/y;
grid-column:z/zz;

注意：x、y、z、zz的值可以是负数，从右边第一根线为 -1开始
grid-column-end:span 2; 表示跨度为2根线
还有通过grid-template-areas的布局方法

grid-template-areas{
    "header header header" 
    "aside main ad"
    "footer footer footer"
}

通过下方代码来设置对应的区域：

.class{
    grid-area:header;
}

grid-area属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
grid布局也可以通过order属性来调整模块的位置，默认为0
可通过fr（份）单位来计算布局：

.conrainer{
     grid-template-columns: 1fr 2fr 1fr ;
}

grid-gap: 12px; 设置相邻item之间的空隙设置为12px
grid-row-grid和grid-column-grid 分别设置行和列之间的布局
repeat方法：

grid-template-rows:240 120 120 120 120; = grid-template-rows:240 repeat(4,120);

Grid尤其适合不规则布局，但是目前还没有开始普及

CSS入门5：Grid布局

Grid的写法