web前端入门到实战：CSS 网格布局：网格区域

1、web前端入门到实战：css 网格布局：网格区域本文是讲解网格布局系列的第三篇，教你从网格布局新手到专家。part 1：创建一个网格容器part 2：网格线part 3：网格区域我们已经学了如何用法行号和命名网格线定位网格项目。其实还有一种定位网格项目的方式，它是对布局的自然描述——grid-template-areas 属性。本篇文章介绍如何用法 grid-template-areas 属性，以及它的工作原理。用法 grid-template-areas 描述布局grid-template-areas 属性接收由一个或多个字符串组成的值。每个字符串（包

2、围在引号中）代表网格里的一行。它可以在已经设置了 grid-template-columns 属性（grid-template-rows 有无设置皆可）的网格上用法。下例中的网格，用了四个区域描述，每个区域占领两行两列。网格区域是通过在多个单元格重复某个区域名称来划定范围的。grid-template-areas: "one one two two""one one two two""three three four four""three three four fou

3、r"在网格项目上用法 grid-area 属性，为其指定某个区域名称，即表示这个区域被该项目占领了。假设，有一个 .test 项目想要占领叫 one 的这个区域，可以这样指定：.test grid-area: one;下面是一个完整的例子：1234.grid display: grid;grid-template-areas:"one one two two""one one two two""three three four four""three

4、three four four"grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 100px);.one grid-area: one;.two grid-area: two;.three grid-area: three;.four grid-area: four;效果：假如用法 firefox grid inspector 查看区域名称和行号分布，会看见每个项目但都占领了两行两列，在网格中得到定位。用法 grid-template-areas 的规章用法 grid-template-ar

5、eas 属性有一些限定规章，假如打破规章，布局也就无效了。第一个规章是 你必需要完整描述网格，即要考虑网格里的每个单元格。假如某个单元格需要留空，就必需插入一个或多个点（比如 . 或 . 等都可以）占位。注重在用法多个点时，点与点之间是没有空格的。所以，还可以这样定义：grid-template-areas: "one one two two""one one two two"". . four four""three three four four"

6、效果（demo）：一个区域名不能在不延续的两块区域上用法。比如，下面的定义 three 的方式就是无效的：grid-template-areas: "one one three three""one one two two""three three four four""three three four four"另外，不能创建一个非矩形区域。比如，l或t形区域的定义是无效的。grid-template-areas: "one one

7、 two two""one one one one""three three four four""three three four four"格式化字符串我喜爱用上面的方式来定义 grid-template-areas 属性——每一行字符串对应网格里的一行，看起来很直观。有时为了达到列与列之间的对齐效果，我会挑选用法多个点来指定空单元格。grid-template-areas: "one one two two

8、""one one two two"". . four four""three three four four"固然，字符串罗列在一行也是有效的：grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four fo

9、ur"grid-template-areas 和 grid-area之所以每块命名区域都要保持为矩形，是由于每块区域都要求能用基于网格线方式实现——而用法四根网格线定义的区域必定是个矩形，不会是个非矩形。我先举一个用法网格线定位项目的例子：item.grid display: grid;grid-template-columns: repeat(5, 100px);grid-template-rows: repeat(5, 50px);.item grid-column: 2 / 4;grid-row: 1 / 4;效果：就是说，只要为

10、一个项目指定了下面四个属性就能精确定位它在网格中的位置了：grid-row-startgrid-column-startgrid-row-endgrid-column-end而 grid-area 属性恰好支持以这种挨次指定项目位置的语法：grid-area: grid-row-start grid-column-start grid-row-end grid-column-end因此，下面的写法：.grid grid-template-areas: "one one two two""one one two two"&a

11、mp;quot;three three four four""three three four four".one grid-area: one;.two grid-area: two;.three grid-area: three;.four grid-area: four;可以改写成：.one grid-area: 1 / 1 / 3 / 3;.two grid-area: 1 / 3 / 3 / 5;.three grid-area: 3 / 1 / 5 / 3;.four grid-area: 3 / 3 / 5 / 5;grid-

12、area 好玩的地方在于还能够用法行号和命名网格线的方式，为项目指定定位区域。用法行号的 grid-area上面讲的是用法 4 个行号来指定 grid-area 属性。但是，假如不是 4 个呢？——比如，我只指定了前三个，没有指定第 4 个值——这时，会用法缺省值 auto，也就是默认延长一个轨道。因此，假如为一个项目用法的是 grid-row-start: 3，就是说其他三个值都设置成 auto 了——此时项目默认占领一行一列：.item grid-area: 3; 效果：

13、用法 indent 的 grid-areaindent是对网格中 命名区域 的称呼。下面我举了一个用法命名网格线指定 grid-area 属性的例子。.grid display: grid;grid-template-columns:one-start three-start 1fr 1frone-end three-end two-start four-start 1fr 1fr two-end four-end;grid-template-rows:one-start two-start 100px 100pxone-end two-end three-start four-start 1

14、00px 100px three-end four-end;.two grid-area: two-start / two-start / two-end;注重到，这里我并未指定 grid-column-end 这个值。规范提到，在这种状况下，grid-column-end 的值就复制 grid-column-start 的，而在 grid-column-end 与 grid-column-start 一样的状况下，grid-column-end 值又会被丢弃，最后的结果与设置行号时一样了——等同于设置了 auto—&mdas

15、h;自动延长一个轨道。还有，假如缺失的是第三个属性 grid-row-end 的值，它也是先复制 grid-row-start 的值，最后等同于设置 auto。下面举了一个比较全面的例子，列出了全部的状况：1234.grid display: grid;grid-template-columns:one-start three-start 1fr 1frone-end three-end two-start four-start 1fr 1frtwo-end four-end;grid-template-rows:one-start two-start 100px 100pxone-end t

16、wo-end three-start four-start 100px 100pxthree-end four-end;.one grid-area: one-start / one-start / one-end / one-end;.two grid-area: two-start / two-start / two-end;.three grid-area: three-start / three-start;.four grid-area: four-start;效果：这也能说明了为什么再给 grid-area 仅设置一个 ident 值的状况下也能正常工作的原理（实际拓展成 4 个值

17、的写法了）。还有一点大家需要知道的是，用法 grid-template-areas 属性创建命名区域的时候，每块区域的边缘网格线都可以用法区域名称引用。我以一个叫 one 的区域名称举例。下面的写法，.one grid-area: one;等同于这种（其他三个值复制第一个值）：.one grid-row-start: one;grid-row-end: one;grid-column-start: one;grid-row-end: one;假如是 -start 属性，那么 one 会被解析到这块区域行、列的起始线；假如是 -end 属性，那么 one 就会解析到这块区域行、列的终止线。固然，

18、这种状况仅适应于 grid-area 用法一个命名区域值指定的场景。在用法 grid-template-areas 的布局中层叠项目用法 grid-template-areas 定义区域的时候，每个单元格能且只能对应一个名称。固然，在完成主体布局之后，你仍然可以用法行号向布局中叠加新的项目。下例中，在主题布局之外，我基于网格线在布局中叠加了一个项目：12345.grid display: grid;grid-template-areas:"one one two two""one one two two"&quot

19、;three three four four""three three four four"grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 100px);.one grid-area: one;.two grid-area: two;.three grid-area: three;.four grid-area: four;/* 与前面不同的是，这个项目是用法行号定位的 */.five grid-row: 2 / 4;grid-column: 2 / 4

20、;效果：你还可以用法命名网格线来指定项目占领的行和列。更好的是，在用法 grid-template-areas 定义网格区域的时候，事实上也会同时给区域周围的四根网格线生成一个以区域名为前缀的名字，区域起始边缘的网格线的名称是 xx-start 的形式，终止边缘的的网格线的名称则是 xx-end 的形式。以命名区域 one 为例，它的起始边线名字叫 one-start，终止边线的名字则叫 one-end。网格中，你可以用法这些隐式生成的命名网格线定位项目。这在需要不同的断点处重新定义网格布局的场景中，你希翼某个定位项目始终位于某个行名之后，会很实用。12345.grid display: gr

21、id;grid-template-areas:"one one two two""one one two two""three three four four""three three four four"grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 100px);.one grid-area: one;.two grid-area: two;.three gri

22、d-area: three;.four grid-area: four;.five grid-row: one-start / three-end;grid-column: three-start / four-start;效果：在响应式设计中用法 grid-template-areas我在构建组件库的时候，发用法 grid-template-areas 属性可以很精确的从 css 里看到组件组成方式。特殊是在不同断点处重新定义网格布局的时候，我只要给 grid-template-areas 属性重新赋值，就能转变当前网格里轨道数量和区域分布。在下面的 css 中，默认组件是单列布局的，在视口宽度达到 600px 以上时，我会重新给 grid-template-area 属性赋值，转变成两列布局。这种办法的益处（也是我前面说过的）就是任何看到这段 css 的人都可很清楚看懂是如何布局的。.wrapp