图解 CSS Grid 布局

在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。

（1）网格容器

网格容器是所有网格项的父元素，网格容器会定义display:grid。下面例子中，类名为 container 的 div 元素就是网格容器：

.container {
	display: grid;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

（2）网格项

网格项是网格容器的子元素，上面例子中类名为item的div元素就是网格项。

（3）网格线

构成网格结构的水平和垂直分隔线就是网格线，这些线位于列（列网格线）或行（行网格线）的任一侧。
下图中的网格有 9 个网格项，有 4 条行网格线和 4 条列网格线：

（4）网格轨道

两条相邻网格线之间的区域就是网格轨道。下图紫色区域就是网格轨道（红线圈起来的位置）：

（5）网格单元

两条相邻的列网格线和两条相邻的行网格线组成是的网格单元。它是网格的单个单元，也是最小单元。下图紫色区域就是一个单元网格：

（6）网格区域

网格区域就是网格上的一个矩形区域，由一个或多个网格单元组成。下图中紫色的区域就是网格区域：

2. 设置基本网格

要想创建 CSS 网格布局，首先需要定义网格容器。可以使用display: grid或者display: inline-grid指定一个容器为网格布局。这样网格容器的所有直接子元素都会隐式转换为网格项。

.container {
   
  display: grid;
}

.container {
   
  display: inline-grid;
}

下面来看一个例子：

<div class="container">
  <div class="box a">1</div>
  <div class="box b">2</div>
  <div class="box c">3</div>
  <div class="box d">4</div>
</div>

在上面的代码中，我们定义了一个类名为 container 的 div 元素，其有四个子元素。下面来将其设置为网格容器：

.container {
   
  display: grid;
}

结果如下：
当元素设置了网格布局，column、float、clear、vertical-align属性都会失效。

3. 设置行和列宽度

将元素单独设置为网格容器不会立即影响子元素的显示方式，因为我们还没有指定布局的央样式。要更改网格中网格项的布局，就需要明确定义网格的行和列。这就用到了 grid-template-columns 和 grid-template-rows 属性。

（1）grid-template-columns

可以使用 grid-template-columns 属性来指定网格容器中所需的列数以及每列的宽度。
属性有：none|auto|max-content|min-content|length|initial|inherit。
该属性接受一个或多个非负 CSS 长度值，这些值的个数就是网格容器的列数，每个值表示每列（即每个网格轨道）的宽度。例如：

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

结果如下：

在这个例子中，我们使用 grid-template-columns 属性将网格容器的布局设置为三列，每列宽 400px。由于网格容器有四个子元素，而我们只给网格指定了三列，所以当网格容器中的网格项数量超过三个时，CSS 会将其他网格项放到新行中以保持容器的布局。

（2）grid-template-rows

可以使用 grid-template-rows 属性来指定网格容器中每一行的高度。与 grid-template-columns 属性不同，它并没有指定网格容器的行数，而只用来设置每行的高度。这是因为每当网格项换行时，网格容器都会隐式创建一个新行。因此，我们无法使用 grid-template-rows 属性来控制网格的行数。
属性有：none|auto|max-content|min-content|length|initial|inherit。
该属性接受一个或多个非负CSS 长度值，其中每个值表示网格容器中每一行的高度，从第一行到最后一行。例如：

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

在上面的代码中，我们指定了网格容器的第一行高度为 100px，第二行高度为 200px。
结果如下：

上面我们仅设置了网格容器中前两行的高度。如果向网格容器中添加更多的网格项，那么那些隐式创建的行的高度将不是由 grid-template-rows 属性决定，而由其内容的大小决定。

（3）grid-template-areas

可以使用grid-template-areas属性来定义网格区域。该属性有以下三个属性值：

• grid-area-name：使用grid-area属性设置的网格区域的名称
• . ：空网格单元
• none：没有定义网格区域

下面来看一个例子：

.item1 {
    grid-area: header; }
.item2 {
    grid-area: menu; }
.item3 {
    grid-area: main; }
.item4 {
    grid-area: right; }
.item5 {
    grid-area: footer; }
.container{
   
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'menu main main . right right'
  'menu . footer footer footer footer';
}

这个网格布局包含六列三行，结果如下：

（4）grid-auto-columns

grid-auto-columns 属性设置网格容器中列的尺寸。该属性有以下七个属性值：

下面来看一个例子：

.item1 {
    grid-area: 1 / 1 / 2 / 2; }
.item2 {
    grid-area: 1 / 2 / 2 / 3; }
.item3 {
    grid-area: 1 / 3 / 2 / 4; }
.item4 {
    grid-area: 2 / 1 / 3 / 2; }
.item5 {
    grid-area: 2 / 2 / 3 / 3; }
.item6 {
    grid-area: 2 / 3 / 3 / 4; }
.grid-container {
   
  display: grid;
  grid-auto-columns: 214px;
}

结果如下：