现今 CSS3 最强二维布局系统 Grid 网格布局

深入学习 CSS3 目前最强大的布局系统 Grid 网格布局

Grid 网格布局的基本认识

Grid 网格布局: Grid 布局是一个基于网格的二位布局系统，是目前 CSS 最强的布局系统，它可以同时对列和行进行处理（它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局）

CSS 布局的过渡: CSS 一直用于对页面进行布局，但一直都不是很完美

1.一开始我们使用 table 做布局，然后转向浮动、定位以及 inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）
复制代码
```
  "Hack" 通常指的是一种快速、非标准或非预期的解决方案，用于绕过某些限制或问题
```
2. 随着 CSS3 的引入，特别是 Flexbox 和 Grid 布局的出现，网页布局变得更加直观和灵活，减少了对这些 "Hack" 方法的依赖，Flexbox 和 Grid 提供了更强大的布局控制，解决了许多历史遗留的布局问题，如垂直居中、响应式设计等
3. Flexbox 在一定程度上解决了这些问题，但它的目的是为了更简单的一维布局，而不是复杂的二维布局
4. Flexbox 布局是轴线布局，只能指定 "项目" 针对轴线的位置，可以看作是一维布局 → 而 Grid 布局则是将容器划分成 "行" 和 "列"，产生单元格，然后指定 "项目所在" 的单元格，可以看作是二维布局（Grid 布局远比 Flex 布局强大）
5. Grid 布局是第一个专门为解决布局问题而生的 CSS 模块

术语: 在深入了解网格的概念之前，我们需要了解一些重要的术语

1. 网格容器与项目

容器（Container）: 设置了 "display: gird / inline-grid" 的元素，就称之为网格容器（grid container）

项目（Item）: grid 容器中的直接子元素就为网格项目（grid item）

css 复制代码

.container {
    display: gird
}

html 复制代码

+ 下面的 .container 元素就为网格容器（grid container），所有的直接子元素 .item 就为该网格容器的一个个项目（grid item）
<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

2. 行和列: 容器里面的水平区域称为 "行"（row）,垂直区域称为 "列"（column）
3. 单元格: 行和列的交叉区域，称为 "单元格"（cell）
4. 网格线: 划分网格的线，称为"网格线"（grid line），水平网格线划分出行，垂直网格线划分出列

Grid 网格布局的使用

Grid 网格布局的属性主要分为两类: 一类定义在容器上面，称为容器属性，另一类定义在项目上面，称为项目属性

容器属性

display: 将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)

grid - 生成一个块级 (block-level) 网格
inline-grid - 生成一个行级 (inline-level) 网格
subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小

css 复制代码

.container {
  display: grid | inline-grid | subgrid;
}

tip: 注意：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响（即设置这些属性了也无效）

grid-template-columns / grid-template-rows: 划分行和列，使用空格来分隔的多个值来定义网格的列和行

grid-template-columns: - 属性定义每一列的列宽
grid-template-rows: - 属性定义每一行的行高

css 复制代码

.container {
    display: grid; /* 定义网格布局 */
    grid-template-rows: 100px 100px 100px; /* 定义每一行行高 */
    grid-template-columns: 100px 100px 100px; /* 定义每一列列宽 */
}

+ 上面代码指定了一个三行三列的网格，列宽和行高都为 100px

.item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    background-color: orange;
    color: white;
}

html 复制代码

<body>
    <span>H</span>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
    <span>H</span>
</body>

repeat(count,any-value): - 有时候，重复写同样的值非常麻烦，尤其网格很多时 → 这时，可以使用repeat()函数，简化重复的值
css 复制代码
```
+ 通过 repeat 函数来简化上面的写法
.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
}
```

auto-fill 关键字: - 有时，单元格的大小是固定的，但是容器的大小不确定 → 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 "auto-fill" 关键字表示自动填

css 复制代码

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px); /* 具体多少列根据容器大小自动划分（每列列宽 100px） */
    grid-template-rows: repeat(3, 100px);
}

+ 下图列数只是某一容器大小的示例图，并非所有，具体列数根据对应的容器大小与列宽有关

auto-fit 关键字: - 该关键字与上面的 auto-fill 的行为基本是相同的，都会尽可能的生成更多的列或行，但是两者也存在一点区别
- auto-fill 不管单元格是否中是否有元素，都会生产对应单元格的空间
- auto-fit 则是如果单元格中没有元素时，会将对应的列宽收缩为 0
- 上面文字描述起来可能比较抽象，如下两图示例（为了更好的展示对应的区别，先将上面单元格的数量缩减成 3 个先）
- 🔺可以理解为 auto-fill 会尽可能的沾满容器空间，所以可能会存在一些空单元格 → 而 auto-fit 不会因为容器还有剩余宽度而进行生成更多的单元格，而是会收缩网格（只生成对应有内容的单元格 - 🔺常用）
fr 关键字: - 网格布局提供了fr关键字（fraction 的缩写，意为"片段"），该关键字可以更方便的定义单元格之间的比例关系
- 如下三列宽分别为 1fr 2fr 3fr 时，就表示第二项是第一项的两倍，第三项就是第一项的三倍
minmax(min,max): - 该函数可以生成一个长度范围，表示长度在这个范围之中
- 如 minmax(300px, 1fr) 就表示列宽不小于 300px，不大于 1fr
auto 关键字: - 该关键字表示长度由浏览器进行决定（也可以理解为默认会自动吸收对应容器的剩余长度，当然如果对应单元格元素设置了 min-width/max-width 当达到对应的最值时，对应的效果可能就会有些出入）
auto / fr / minmax: - 该三个对应的功能都比较类似，都会自动吸收容器的剩余空间，但如果同时存在时也会有对应的优先级与对应需要注意的问题
- 优先级: - minmax 优先级大于 fr，fr 的优先级
- tip: - 为了保证最小空间，网格可能会超出容器元素的范围（auto 的最小宽度为 fit-content，即内容宽度）
网格线的名称: - grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，后面网格项目（item）可以使用对应的网格线名称，可以更加方便将项目元素布局到对应想要的位置上（网格项目中具体如何使用，后面网格项目属性讲到时再进行演示）
css 复制代码
```
.container {
    display: grid;
    grid-template-columns: [col-1] 100px [col-2] auto [col-3] 100px [col-4];
    grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px [row-4];
}
```

gap / row-gap / column-gap : 用来设置行与行之间的间隔（行间距），与列与列的间隔（列间距）

css 复制代码

+ 普通写法
	{
        row-gap: 设置行与行之间的间隔（行间距）; 
        column-gap: 设置列与列之间的间隔（列间距）; 
    }

+ 我们也可以上面两个属性的简写属性 gap 来快速设置对应的间隔: gap: row-gap column-gap
    {
        gap: 行间距 列间距;
    }

+ 当行间距与列间距相同时，我们也可以只需写一个值
    {
		gap: 行列间距;
    }

css 复制代码

.container {
    ...
    row-gap: 12px; /* 设置行间距 */
    column-gap: 12px; /* 设置列间距 */
}

grid-auto-flow: 用于指定网格中项目的放置流向（放置顺序），值通常为 row（先行后列）或 column（先列后行），默认为 row 即先行后列 → 基本效果如下示例图

grid-auto-flow 属性除了可以设置成 row 和 column，还可以设置成 row dense 和 column dence，第二个值主要用于某些项目在指定完位置后，剩下的项目怎么放置（如: 先行后列，并且尽可能紧密填满） → 文字描述可能会比较抽象，我们可以通过下面几张图来进行理解

grid-template-areas: 网格布局中允许通过该属性来指定一些区域（area），每一个区域由一个或多个单元格组成

css 复制代码

{
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-template-areas:
        "a b c"
        "d e f"
        "g h i"
   ;
}
+ 例1: 如上述代码就相当于给网格划分出 9 个单元格，人后然后将其定名为 a-i 的九个区域，分别对应这九个单元格

css 复制代码

{
    grid-template-areas: 'a a a'
                         'b b b'
                         'c c c';
}
+ 例2: 上面代码将 9 个单元格分成 a、b、c 三个区域

css 复制代码

{
    grid-template-areas: 'a . c'
                         'd . f'
                         'g . i';
}
+ 例3: 如果某些区域不需要利用，则使用 "点"（.）表示

css 复制代码

grid-template-areas: 
	"header header header"
	"main main sidebar"
	"footer footer footer";
+ 🔺例4: 上面代码中，顶部是页眉区域 header，底部是页脚区域 footer，中间部分则为 main 和 sidebar

作用: - 当在网格容器中划分好对应的区域后，我们可以在子元素（网格项目）中通过 grid-area 属性，来对某一个网格项目快速的放置到对应的区域中（具体图例演示，在后面项目属性 grid-area 中进行更加直观的示例）
tip: - 需要注意区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 "区域名-start"，终止网格线会自动命名为 "区域名-end"

place-items / justify-items / align-items: 这些属性用于设置单元格中元素的摆放位置，justify-items 水平方向，align-items 垂直方向，place-items 前面两个的简写方式

css 复制代码

+ 属性值: 左 中 右 拉伸
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
    
  place-items: <align-items> <justify-items>; /* 简写: 如果只写一个值时，将会认为这两个值相等 */
}

+ 对应属性值的作用（及对应 justify-items 示例图）:
	- start - 对齐单元格的起始边缘
	- end - 对齐单元格的结束边缘
	- center - 单元格内部居中
	- stretch - 拉伸，占满单元格的整个宽度（默认值） → 当元素没有指定具体的大小时

place-content / justify-content / align-content: 这些属性用于定义整个网格区域在容器元素的摆放位置，justify-content 水平方向，align-content 垂直方向，place-content 前面两个的简写方式

css 复制代码

+ 属性值: 这些属性值跟 flex 布局中的基本一致
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
    
  place-content: <align-content> <justify-content>; /* 简写: 如果只写一个值时，将会认为这两个值相等 */
}

+ 对应属性值的作用（及对应 justify-content 示例图）:
	- start - 对齐容器的起始边框（默认）
	- end - 对齐容器的结束边框
	- center - 容器内部居中
	- stretch - 项目大小没有指定时，拉伸占据整个网格容器（即没有通过 grid-template-columns / grid-template-rows 指定对应列宽或行高时）
	- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
	- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔（两端对齐）
	- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

grid-auto-rows / grid-auto-columns: 用于指定一些自动生成的行和列，对应的行高与列宽（如: 当一个网格是三行三列的，但里面某一个网格项目指定在第 5 行等等，此时网格就会自动生成一些行或列 → 或在一个三行三列的网格中只有 9 个单元格，但网格中的元素却超出了九个时，此时也会自动生成一行或列）→ 这些自动生成的行或列，对应的行高或列宽是 fit-content 适应内容的 → 而该两个属性就是用来指定一些自动生成的行或列对应的行高与列宽的

如下示例: 在一个三行三列的网格容器中，有十个子元素 → 因为网格单元格不够，就会自动生成一行，我们可以通过 grid-auto-row 属性来指定对应自动生成行的行高（列同理）
css 复制代码
```
.container {
    gap: 6px;
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    
    grid-auto-rows: 100px; /* 指定自动生成的行的行高大小 */
}
```

grid-template / grid:

grid-template: - 该属性为 grid-template-columns 、grid-template-rows 和 grid-template-areas 这三个属性的简写形式
grid: - 该属性为 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 这六个属性的简写形式
tip: - 从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了

项目属性

grid-row-start / grid-row-end / grid-column-start / grid-column-end :

（1）用于定义某个网格项目的的位置，通过指定项目的四个边框，分别定位在哪根网格线上

css 复制代码

+ 如下: 将第一个网格项目的网格项的行和列都在对应行或列的 1 到 3 网格线上
.item1 {
    grid-row-start: 1; /* 定义项目行开始线 */
    grid-row-end: 3; /* 定义项目行结束线 */
    grid-column-start: 1; /* 定义项目列开始线 */
    grid-column-end: 3; /* 定义项目列结束线 */
}

（2）这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字

css 复制代码

.container {
    width: 400px;
    display: grid;
    gap: 6px;
    /* 给网格容器对应的网格线命名 */
    grid-template-columns: [column-1] 100px [column-2] 100px [column-3] 100px;
    grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px;
}

/* 通过命名网格线来指定 item1 对应的放置位置 */
.item1 {
    grid-row-start: row-1;
    grid-row-end: row-3;
    grid-column-start: column-1;
    grid-column-end: column-3;
}

（3）在该四个属性上也可以使用 span 关键字 来表示跨越多少个网格（↓）

css 复制代码

{
    grid-row-start: span 所要跨越的网格个数;
    
    grid-column-start: span 3; /* 如: 表示该项目在列上跨越 3 个单元格 */
}

grid-row / grid-column: 该两个属性为上面 grid-row-start / grid-row-end / grid-column-start / grid-column-end 属性的简写形式

css 复制代码

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

+ 该两个属性只是上面的简写形式，所以具体就不做过多的演示了

grid-area: 属性用于指定项目放在哪一个区域，来快速放置对应项目到指定的位置上（具体网格区域的定义方式，参照前面）

我们可以通过在网格容器上定义好对应的区域，在在对应的网格项目上通过该属性来指定项目所要放置的位置，从而实现快速的实现想要的布局效果，如下 ↓

place-self / justify-self / align-self: 这些属性用于设置单元格内容的摆放位置，justify-self 水平方向，align-self 垂直方向，place-self 前面两个的简写方式

tip: 该三个属性与前面容器属性中 place-items / justify-items / align-items 的作用一样，不同的容器属性设置会作用在所有的单元格上，而该项目属性（slef）只作用于某个项目上（单元格）

css 复制代码

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
+ 因为前面容器属性 justify-items 上已经解释了每个属性值的含义了，所以这里就不再过多的解释每一个属性值了

其它属性补充

z-index: 如果单元格中的元素与其它单元格元素出现层叠是，可以通过该属性来指定对应的层叠顺序（与 position 层叠同理）
- 例如: 因为元素的大小可以跟单元格的大小无关，即元素可以指定比单元格更大的大小，所以就有可能会超出到其它的单元格上 → 与其它单元格元素产生了层叠
order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序（flexbox），该属性再网格布局中同样适用，值越小越布局顺序越靠前（如下示例图）