CSS网格布局（Grid）教程

1、概述

CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将彻底颠覆页面布局的传统方式。

首先来介绍几个概念:

想象一个三行三列的布局，网格线就是构成网格全部的线条，三行三列的布局每行就会有4条网格线。
网格轨道就是相邻两条平行的网格线之间的部分。

和flex布局同样，他会有父容器和子项目，在这儿咱们称为网格容器和网格项。
接下来，咱们从网格容器到网格项的各个基本属性来介绍网格布局。

2、 网格容器

将属性 display 值设为 grid 或 inline-grid 就建立了一个网格容器，全部容器直接子结点自动成为网格项目。

例1：

网格项目按行排列，网格项目占用整个容器的宽度。

例2：

网格项目按行排列，网格项目宽度由自身宽度决定。

3、显示网格

属性grid-template-rows和grid-template-columns

容器指定了网格布局之后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

例3：

属性grid-template-rows用于定义行的尺寸，即轨道尺寸。轨道尺寸能够是任何非负的长度值（px，%，em，等）

网格项目1的行高是50px，网格项目2的行高是100px。

由于只定义了两个行高，网格项目3和4的行高取决于其自己的高度。

例4：

相似于行的定义，属性grid-template-columns用于定义列的尺寸。

由于定义中只有三列，因此项目4，5，6排在新的一行; 并由于它们位于第1，2，3列的轨道上，因此其宽度等于定义中第1，2，3列轨道的宽度。

网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。

4、网格项目跨越行列

网格项目默认都占用一行和一列，但可使用前一节中定位项目的属性来指定项目跨越多行或多列。

例5：

经过grid-column-start和grid-column-end属性值的设置，使该网格项目跨越多列。

5、justify-content 属性，align-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

这两个属性的写法彻底相同，均可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图彻底同样，只是将水平方向改为垂直方向。）

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是一样长度的间隔。

6、grid-auto-columns 属性，grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。好比网格只有3列，可是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动建立的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows彻底相同。若是不指定这两个属性，浏览器彻底根据单元格内容的大小，决定新增网格的列宽和行高。

---

但愿个人文章可以对您有所帮助

欢迎你们滴滴我：rgz987