之前有一篇文章是讲解CSS中的Flex布局

Post not found: web开发/非常实用的Flex布局 非常实用的Flex布局

所以本篇文章要讲解另一个更为强大的布局方式Grid。

1. 入门

在早期的网页布局中，如果要实现非常复杂的布局是很麻烦的事情，只有通过CSS框架，或者自行花费大量的时间去写相关的CSS样式，所以在10年以前，网页的页面布局都非常的简陋。

Flex和Grid非常的相似，同时也存在着非常大的不同，简单的来说Flex更适合用在单行的布局上，而多行布局使用Flex虽然能够实现，但是非常的麻烦。

Grid的拿手好戏就是多行布局，它可以将容器划分为“行”和“列”，如果有做过控制台开发小游戏的朋友应该清楚，在一个平面中要做出一个游戏界面，就需要使用二维数组进行布局，而Grid就恰好是“二维布局”。

正因为Grid是二维布局，所以它远比一维布局的Flex更加的强大。

2. 基本概念

2.1 container和item

跟Flex一样，Grid布局也只对顶层子元素有效，比如：

<div class="container">
  <div class="item"><p>1</p></div>
  <div class="item"><p>2</p></div>
  <div class="item"><p>3</p></div>
</div>

将container设置为Grid，那么Grid布局就仅仅只对item生效，对<p>是不生效的。

2.2 row和column

container中水平区域称为row（行），垂直区域称为column（列）。

2.3 cell

行和列的交叉区域，就称为cell（单元格）。

2.4 grid line

划分单元格的线，就称为grid line（网格线），水平网格线划分出行，垂直网格线划分出列。

3. 容器属性

3.1 display属性

display: grid指定一个容器采用网格布局。

div {
    display: grid; /*块级元素*/
    display: inline-grid; /*行内元素。*/
}

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

3.2 grid-template-columns 属性， grid-template-rows 属性

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

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

除了用绝对单位，也可以设置为容器的百分之多少：

.grid-container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
}

3.2.1 repeat()

上面的代码用repeat()改写如下。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

同时所要重复的值可以是多个，例如：

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 50px 30px 60px);
    grid-template-rows: repeat(2, 50%);
}

效果如下：

3.2.2 auto-fill 关键字

如果单元格的大小固定，但是容器大小不确定的情况下，使用auto-fill就可以让每行或者每列尽可能多的收纳单元格。

.grid-container {
    display: grid;
    grid-template-rows: repeat(2, 50%);
}

点一点看效果：

grid-template-columns: repeat(auto-fill, 30px); grid-template-columns: repeat(auto-fill, 40px); grid-template-columns: repeat(auto-fill, 50px);

3.2.3 fr 关键字

fr关键字（fraction 的缩写，意为”片段”）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns: 150px 1fr 2fr grid-template-columns: 150px 2fr 2fr grid-template-columns: 100px 3fr 2fr

3.2.4 minmax()

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

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

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

3.2.5 auto 关键字

auto关键字表示由浏览器自己决定长度。

.grid-container {
    display: grid;
    grid-template-columns: 40px auto 40px;
    grid-template-rows: 100px 100px 100px;
}

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

3.2.6 网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.grid-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]。

3.3 grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

• grid-row-gap属性设置行与行的间隔（行间距）。
• grid-column-gap属性设置列与列的间隔（列间距）。
• grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。

注：现在可以简写成row-gap、column-gap、gap。

点一点看效果：

grid-row-gap：

grid-row-gap: 10px grid-row-gap: 20px grid-row-gap: 25px

grid-column-gap：

grid-column-gap: 10px grid-column-gap: 20px grid-column-gap: 25px

3.4 grid-template-areas 属性

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.brid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
}

如果某些区域不需要利用，则使用”点”（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

3.5 grid-auto-flow 属性

3.5.1 属性

• row：先行后列。

• column：先列后行。

• row dense：”先行后列”，并且尽可能紧密填满，尽量不出现空格。

• column dense：”先列后行”，并且尽量填满空格。

点一点看效果：

row column

row dense

点一点看效果：

row row dense

column dense

点一点看效果：

column column dense

3.6 justify-items 属性， align-items 属性， place-items 属性

• justify-items属性设置单元格内容的水平位置（左中右）。
• align-items属性设置单元格内容的垂直位置（上中下）。
• place-items属性是align-items属性和justify-items属性的合并简写形式。

3.6.1 属性

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

点一点看效果：

justify-items：

start end center stretch

align-items：

start end center stretch

3.7 justify-content 属性， align-content 属性， place-content 属性

• justify-content属性是整个内容区域在容器里面的水平位置（左中右）。
• align-content属性是整个内容区域的垂直位置（上中下）。
• place-content属性是align-content属性和justify-content属性的合并简写形式。

3.7.1 属性：

• start：对齐容器的起始边框。
• end：对齐容器的结束边框。
• center：容器内部居中。
• stretch：项目大小没有指定时，拉伸占据整个网格容器。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

点一点看效果：

justify-content：

start end center stretch space-around space-between space-evenly

align-content：

start end center stretch space-around space-between space-evenly

3.8 grid-auto-columns 属性， grid-auto-rows 属性

当一个网格仅仅只指定为3*3，而如果在指定网格之外还有项目，则可以使用grid-auto-columns和grid-auto-rows进行指定，如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

点一点看效果：

grid-auto-rows: 50px; grid-auto-rows: 80px; grid-auto-rows: 100px;

3.9 grid-template 属性， grid 属性

• grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
• grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

4. 项目属性

4.1 grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

.item {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 2;
}

下面只改变grid-column-end的效果，其它的属性同理：

grid-column-end: 2 grid-column-end: 3 grid-column-end: 4

4.2 grid-column 属性， grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式。

grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

4.3 grid-area 属性

grid-area属性指定项目放在哪一个区域。

.item {
    grid-area: 3;
}

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item {
    grid-area: 1 / 1 / 3 / 3;
}

4.4 justify-self 属性， align-self 属性， place-self 属性

• justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
• align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
• place-self属性是align-self属性和justify-self属性的合并简写形式。

4.4.1 属性

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

点一点看效果：

justify-self：

start end center stretch

align-self：

start end center stretch

5. 总结

通过上面的眼花缭乱的属性，可以得知Grid比Flex强大的多，如果是单行布局建议选用Flex，而多行布局选用Grid，其实Grid和Flex在项目中也经常用到，不过我之前看教学视频的时候，貌似大部分讲师都更熟悉Flex一些，而Grid却很少用到（可能是由于Grid出来的比较晚）。所以导致我之前对Grid知之甚少，几乎没有用到过。

不过现在大部分现代浏览器都支持了Grid，所以可以放心大胆的用，但是如果是想要兼容老版本的IE浏览器…那就只能节哀顺变了。

6. 参考资料

CSS Grid 网格布局教程