# grid布局 --- ## 一、概述 flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是**一维布局**。 grid布局则是将容器分成“行”和“列”，产生单元格。可以看作是**二维布局**。 ## 二、基本概念 ### 2.1 容器和项目 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。 ```javascript <div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div> ``` 上面代码中，最外层的`<div>`元素就是容器，内层的三个`<div>`元素就是项目。 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的`<p>`元素就不是项目。Grid 布局只对项目生效。 ### 2.2 行和列 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 ### 2.3 单元格 行和列的交叉区域，称为"单元格"（cell）。 正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。 ### 2.4 网格线 划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。 正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。 ## 三、容器属性 Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。 ### 3.1 display 属性 `display: grid`指定一个容器采用网格布局。 ```css div { display: grid; } ``` ### 3.2 grid-template-columns、grid-template-rows 容器指定了网格布局以后，接着就要划分行和列。`grid-template-columns`属性定义每一列的列宽，`grid-template-rows`属性定义每一行的行高。 ```css .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; } ``` ####（1）repeat() 有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用`repeat()`函数，简化重复的值。 ```css .container { display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); } ``` ####（2）auto-fill 关键字 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用`auto-fill`关键字表示自动填充。 ####（3）fr 关键字 为了方便表示比例关系，网格布局提供了`fr`关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为`1fr`和`2fr`，就表示后者是前者的两倍。 ```css .container { display: grid; grid-template-columns: 1fr 1fr; } ``` ####（4）minmax() `minmax()`函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 ## 语法 ####（5）auto 关键字 `auto`关键字表示由浏览器自己决定长度。 ``` grid-template-columns: 100px auto 100px; ``` 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了`min-width`，且这个值大于最大宽度。 ####（6）网格线的名称 `grid-template-columns`属性和`grid-template-rows`属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。 `display: grid`和`display: inline-grid` ### 3.3 grid-row-gap，grid-column-gap,grid-gap `grid-row-gap`属性设置行与行的间隔（行间距），`grid-column-gap`属性设置列与列的间隔（列间距）。 `grid-gap`属性是`grid-column-gap`和`grid-row-gap`的合并简写形式，语法如下。 ``` grid-gap: <grid-row-gap> <grid-column-gap>; ``` >根据最新标准，上面三个属性名的`grid-`前缀已经删除，`grid-column-gap`和`grid-row-gap`写成`column-gap`和`row-gap`，`grid-gap`写成`gap`。