CSS常见布局(6) | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

前言少叙，直奔主题，让我们继续讲解gird布局。

通过网格区域命名和定位网格项目

什么是网格区域：

网格区域(grid-area)是一个逻辑空间，主要用来放置一个或多个网格单元格（Grid Cell）。他是由四条网格线(Grid line)，网格区域每边一条，四边相交组织的网格轨道(Grid Track)。简单点理解，网格区域是有四条网格线交织组成的网格空间，这个空间中可能是一个网格单元格，也可能是多个网格单元格。

定义网格区域

再CSS Grid Layout中定义网格区域有两种方式，一种是通过网格线来定义，另一种是通过grid-template-areas来定义。接下来看看两种定义网格区域的方法在具体使用过程中有何不同。

网格线定义网格区域

使用网格线定义网格区域的方法非常的简单，首先依赖于 `grid-template-columns` 和 `grid-template-rows` 显式定义网格线，甚至是由浏览器隐式创建网格线，然后通过 `grid-area` 属性通过取网格线，组成网格线交织区域，那么这个区域就是所讲的网格区域。在使用 `grid-area` 属性调用网格线，其遵循的规则是 `grid-area: row-start`/ `column-start` / `row-end` / `column-end`。

`grid-template-areas` 定义网格区域

除了使用网格线的交组来定义网格区域之外，在 CSS Grid Layout 中还可以通过 `grid-template-areas` 属性来定义网格区域的名称，然后需要放在对应网格区域的元素，可以通过 `grid-area` 属性来指定。而且重复区域可以使用同一个名称来实现跨区域。另外对于空的轨道区域，可以使用点号 `.` 来代表。
我发现这样布局的一个优点，在不设置高度的情况下（父容器和 `grid-template-rows` 的值，或者 `grid-template-rows` 设置为 `auto` 时，`slider` 和 `content` 的高度是一致的，并且会根据其内的高度自适应）

今天先到这里啦,拜拜!!