Grid布局（一）介绍

一、前言

Grid布局，又叫网格布局，是最强大的CSS布局方案；
Grid将网页分成了一个个的网格，通过CSS样式，我们可以对网格做出任意的组合，做出任何复杂的布局；
Grid比Flex相比，Flex是一维布局（轴线布局），而Grid是二维布局；

二、基本概念

1. 容器和项目

• 容器：使用Grid布局的区域
• 项目：容器内部的网格（单元格）

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

上述代码中，container是容器，而内部的item是项目；

项目只能是容器的顶层子元素，不包含项目的子元素；(上述的span不是项目，Grid也对span不起作用)；

2. 行和列

• 行：容器的水平区域称为“行”
• 列：容器的垂直区域称为“列”

3. 单元格

行和列交叉区域，称为“单元格”；

n行和m列会产生nm个单元格，例如，3行4列会产生12个单元格；

4. 网格线

划分网格的线，称为“网格线”。
水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线；
网格线的序号都是从1开始的。