grid布局非常强大，他是二维布局模式，将容器划分成“行”和“列”，产生单元格，然后指定项目所在单元格，，而flex是一维布局，grid远比flex强大的多。
这里我只讲日常工作中常用的属性。
1、容器上的属性
（1）display属性
display：grid 用来指定容器为网格布局。这跟我们以前写 display：block； display：flex；都是一个意思，就是告诉浏览器我当前的这个盒子使用的布局方式，这样浏览器才能识别你接下俩设置的属性。
div { display: grid; } // 指定一个元素是行内块网格布局 div { display: inline-grid; }这里需要注意的是：设为网格布局以后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-*等设置都将失效。
（2）grid-template-columns属性和grid-template-rows属性
容器指定了网格布局之后，接着就可以划分行和列了，grid-template-columns用来指定每一列的宽度，grid-template-rows用来指定每一行的高度。
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; } .container { display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); }上面三种写法都是指定了一个三行三列的网格，第一种是固定宽高，第二第三种是宽高都占总的三分之一。
在设置这两个属性时，我们时常会用到一些关键字：repeat、fr、minmax
repeat：repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
grid-template-columns: repeat(2, 100px 20px 80px);fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
.container { display: grid; grid-template-columns: 1fr 1fr; }fr可以与绝对长度的单位结合使用，这时会非常方便。
.container { display: grid; grid-template-columns: 150px 1fr 2fr; }上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。
minmax()：
grid-template-columns: 1fr 1fr minmax(100px, 1fr);上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
(3)grid-auto-flow 属性
这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
(4)justify-items 属性，align-items 属性，place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
.container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } - start：对齐单元格的起始边缘。- end：对齐单元格的结束边缘。- center：单元格内部居中。- stretch：拉伸，占满单元格的整个宽度（默认值）place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;2、容器的属性
(1)justify-self 属性，align-self 属性，place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
3、布局实例
（1）用grid实现两栏布局
// html部分 <div class="container"> <div class="left"></div> <div class="main"></div> </div> // css部分.container{ display: grid; grid-template-columns: 200px 1fr; }这样，我们只需一行代码就搞定了两栏布局。
（2）实现水平垂直居中
// html部分 <div class="container"> <div class="item"></div> </div> // css部分 .container{ display: grid; justify-items: center; align-items: center; }（3）实现十二网格布局
grid-template-columns: repeat(12, 1fr);
转载于:https://www.cnblogs.com/00feixi/p/11379007.html
