grid-layout 网格布局--快速上手

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);