图解 CSS Grid 布局

Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！
CSS Grid常用属性模块图.png

1. 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

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

结果如下：

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

（2）grid-template-rows

.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 属性设置网格容器中列的尺寸。该属性有以下七个属性值：

auto	默认值。由容器尺寸决定列的尺寸。
fit-content()
max-content	根据列中最大的项目设置每列的尺寸。
min-content	根据列中最小的项目设置每列的尺寸。
minmax(min.max)	设置大于或等于 min 且小于或等于 max 的尺寸范围。
length	设置列的尺寸，通过使用合法的长度值。参阅长度单位
。
%	设置列的尺寸，通过使用百分比值。

下面来看一个例子：

.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;
}

结果如下：