网格布局 - 1

Grid 布局则是将容器划分为“行”和“列”，产生单元格，然后指定项目所在的单元格。可以看作是二维布局。

容器和项目

采用网格布局的区域，称为“容器”。容器内部采用网格定位的子元素，称为“项目”。

<div>
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>

上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面的 <p> 就不是项目。

行和列

容器的水平区域称为“行”，垂直区域称为“列”。

上平深色区域就是行，垂直深色区域就是列。

单元格

划分网格的线，称为“网格线”。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n 行就有 n + 1 根水平网格线，m 列就有 m + 1 跟垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 X 4 的网格，共有 5 根水平网格线和 5 跟垂直网格线。

容器属性

Grid 布局的属性分为两类。一类是定义在容器上面的，称为容器属性；另一类是定义在项目上的，称为项目属性。

display 属性

.box {
    display: grid;
}

默认情况下，容器都是块级元素，但是也可以设置为行内元素。

.box {
    display: inline-grid;
}

注意：设为网格布局后，容器子元素的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 都等设置将失效。 

grid-template-columns、grid-template-rows 属性

grid-template-columns 属性指定每一列的列宽、grid-template-rows 属性定义每一行的行高。

.box {
    display: grid;
    grid-template-colums: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

上面 css 指定了一个三行三列的网格，列宽和行高都是 100px。

除了使用绝对单位，也可使用百分比。

.box {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 33.3% 33.3% 33.3%;
}

• repeat() 

接受两个参数，第一个参数是重复次数，第二个参数是所要重复的值（或者是某种格式）。

grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);

• auto-fill 关键字

如果希望每一行（或每一列）能够尽可能的容纳多的单元格，可以使用 auto-fill 关键字自动填充。

grid-template-columns: repeat(auto-fill, 100px);

上面代码表示每列宽度是 100px，然后自动填充，直到容器不能放置更多的列。 

• fr 关键字

如果两列的宽度分别是 1fr 和 2fr，就表示后者是前者的两倍。

fr 可以与绝对单位结合使用。

grid-template-columns: 150px 1fr 2fr;

第一列宽度为 150px；第二列的宽度是第三列的一半。 

 

• minmax()

minmax 函数产生一个长度范围，长度就在这个范围之中。接受两个参数，分别是最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

 minmax(100px, 1fr) 表示列宽不小于 100px，不大于 1fr。

• auto 关键字

由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。 

• 网格线的名称

.container {
    display: grid;
    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

• 布局实例

.wrapper {
    display: grid;
    grid-template-columns: 70% 30%;
}

上面代码将左边栏设为70%，右边栏设为30%。

grid-template-columns: repeat(12, 1fr);    // 传统的十二网格布局