Grid 网格布局简介 | 每天学一点Grid

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

Grid 布局

网格布局（Grid） 是最强大的 css 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 以前，只能通过复杂的 css 框架达到的效果，现在浏览器内置了。

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成 “行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

本文将从 Grid 网格布局简介 这个方面来介绍 Grid 弹性盒布局

Grid 网格布局简介

Grid 布局，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。

我们一直使用 css 来布局我们的网页，但一直以来都存在这样或那样的问题。

一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能，例如垂直居中。

Flex 弹性盒布局的出现，很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局。**Grid 网格布局是第一个专门为解决布局问题而创建的 css 模块。 **

在学习 Grid 布局之前，我们需要了解一些基本概念。

1. 网格容器（Grid Container）

给元素应用 display:grid，它是其所有网格项的父元素。

下面例子的 container 就是网格容器。

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

2. 网格项（Grid Item）

网格容器的子元素，下面的 item 元素是网格项，但 sub-item 不是。

<div class="container"> 
    <div class="item">
    </div> <div class="item"> 
        <p class="sub-item"></p> 
    </div> 
    <div class="item"></div> 
</div>

3. 网格线（Grid Line）

网格的分界线。分为行网格线（row grid lines）和列网格线（column grid lines）。

下面的黄色线就是一条列网格线。

4. 网格轨道（Grid Track）

两个相邻的网格线之间称之为一个网格轨道。你可以认为它们是网格的一行或一列。

下面在第二个和第三个网格线之间的黄色部分为一个网格轨道。

5. 网格单元（Grid Cell）

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。

下面的行网格线 1、2，和列网格线 2、3 组成的黄色区域为一个网格单元。

6. 网格区（Grid Area）

网格区是由任意数量的网格单元组成。

下面的行网格线 1、3 和列网格线 1、3 组成的黄色区域为一个网格区。