Grid布局

概述

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至目前，几乎所有的浏览器都对 CSS Grid 提供了原生的支持。
Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行.

Grid 布局和 flex 布局

flex 布局和 Grid 布局有实质的区别:

• flex 布局是一维布局
• Grid 布局是二维布局

flex 布局一次只能处理一个维度上的元素布局，一行或者一列。
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
相比 Flexbox 的一维布局（仅能沿行或列单一轴线排布），Grid 更擅长处理整体页面级布局，二者形成互补而非竞争关系。

Grid 与 Flexbox 的核心区别

最佳实践：用 Grid 做宏观页面布局，Flexbox 处理组件内部微观布局。

核心概念

1. 核心角色

容器（Container）：应用 display: grid 或 display: inline-grid 的父元素，是网格布局的基础载体。

项目（Item）：容器的直接子元素，仅顶层子元素属于网格项目，孙子元素不受 Grid 布局直接影响。

2. 关键术语

3. 显式网格与隐式网格
   显式网格：通过grid-template-columns、grid-template-rows等属性明确定义的网格结构，尺寸和行为完全可控。

隐式网格：当项目超出显式网格范围时，浏览器自动创建的额外轨道，由grid-auto-columns、grid-auto-rows等属性控制。

网格布局的属性

属性的基本概念：

1. 容器（container）——有容器属性
2. 项目（items）——有项目属性
3. 行（row)
4. 列（column）
5. 间距（gap) ——单元格之间的距离
6. 区域（area）—— 自己划分每个单元格占据的区域
7. 内容（content)

容器和项目

Grid 和 flex 类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性
采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”

<div class="box">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>

上面的代码中，box就是容器，item就是项目

网格轨道

通过 grid-template-rows 和 grid-template-columns 指定当前容器的行和列后，这里的行和列就是网格轨道。但在实际页面中，由于页面的内容不确定，内容可能会超过 grid-template-columns和 grid-template-rows 指定的网格轨道个数，这个时候网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。

网格线

网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从 1 开始的。

Grid 布局属性

Grid 布局属性分为两大类

1. 一类是容器属性，
2. 一类是项目属性。

容器属性

容器属性声明 display：grid 则该容器是一个块级元素，设置成display: inline-grid则容器元素为行内元素。

注意：
设为网格布局以后，容器子元素（项目）的 float 、 display: inline-block 、 display: table-cell 、 vertical-align 和 column-* 等设置都将失效。

grid-template-columns 属性

grid-template-rows 属性

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

.box {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     /*指定了一个三行三列的网格，列宽和行高都是100px*/
}

repeat() 函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat() 函数，简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

.box {
     display: grid;
     grid-template-columns: repeat(3, 33.33%);
     grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat() 这个函数简化重复的值

auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
有的时候，父容器的尺寸是不确定的，我们需要把子元素往父容器中逐个填充，这个时候我们可以利用auto-fill不确定容器尺寸下的自动填充：

box {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
}

表示每列宽度 100px ，然后自动填充，直到容器不能放置更多的列

fr 关键字

fr 是单词fraction的缩写，表示分数。
Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。 fr 单位代表网格容器中可用空间的一等份。 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

.box {
     display: grid;
     grid-template-columns: 200px 1fr 2fr;
}

minmax() 函数

我们有时候想给网格元素一个最小和最大的尺寸， minmax()函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

.box {
     display: grid;
     grid-template-columns: 1fr 1fr minmax(300px, 2fr);
 }

auto 关键字

auto 关键字表示由浏览器自己决定长度。通过 auto关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。

.box {
     display: grid;
     grid-template-columns: 100px auto 100px;
 }

row-gap 属性

row-gap属性设置行与行的间隔（行间距）
row-gap: 10px表示行间距是 10px

column-gap 属性

column-gap属性设置列与列的间隔
column-gap: 20px 表示列间距是 20px

gap 属性

gap属性是 row-gap 和 column-gap 的合并
简写形式： gap: 行间距 列间距
示例：gap: 10px 20px

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行
这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即”先行后列”。也可以将它设成 column ，变成”先列后行”。

grid-auto-flow: column;

grid-auto-rows/grid-auto-columns：定义隐式网格的轨道尺寸：

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* 隐式创建的行高均为100px */
}

项目属性

学习视频：

• 90分钟，彻底攻克Flex、Grid布局（附讲义）

参考笔记：

• CSS Grid 布局基础学习笔记