html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略

所有奇技淫巧都只在方寸之间。

几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰。

虽然网格布局好处有很多，但学习起来并不简单，原因是用来设置布局的属性实在太多，其中光是作用于父容器的属性就有17种，再加上子元素属性有10种，另外还有这些属性值的不同取值方式。这些对于记忆来说绝对是个不小的负担。那么这么多属性以及用法，要如何在短时间内消化掉呢？在接下来这篇文章里，我将针对这27种属性以及它们各自的用法，分享我独家的学习策略，希望对大家的学习有所帮助。

布局之道

CSS作为一种网页排版设计语言，其核心的设计思想必然要遵守相关的领域知识。网格布局是一种二维布局结构，它是由纵横相交的两组网格线形成的框架性布局结构。网页设计者可以利用这些由行(row)和列(column)形成的框架性结构来布局设计元素。

在定义一种网格布局结构的时候，我们需要在父容器上描述要布局的主体框架结构。为了描述这一框架结构，我们就需要给它的基本构成元素命名。一个网格布局的构成元素可以概括为以下几种概念:

row line: 行线

column line: 列线

track: 网格轨道，即行线和行线，或列线和列线之间所形成的区域，用来摆放子元素

gap: 网格间距，行线和行线，或列线和列线之间所形成的不可利用的区域，用来分隔元素

cell: 网格单元格，由行线和列线所分隔出来的区域，用来摆放子元素

area: 网格区域，由单个或多个网格单元格组成，用来摆放子元素

grid基本概念

牢记上述这些概念是之后熟练掌握和应用网格布局的基础。

构建之法

要熟练掌握一门技术，核心是找到最基本的套路，然后不断练习从而可以在之后的实践过程中减少决策的时间。所以，这一部分主要就是介绍网格布局构建过程中的一些常用套路。

这里我们要解决的问题是，如何利用最基本的规则来构建出理想的布局模型。在布局过程中，归根结底需要处理的就两种页面元素：父容器和子元素。前者主要用来设置基础的布局框架，相当于建筑中的设计蓝图，而后者就是用来进行个性化的布局调整。因此我个人归纳了在使用网格布局过程中的套路是：针对父容器元素进行设置需要三个步骤：定框架、设间隔和找对齐，对子元素来说有两个步骤：摆位置和找对齐。我把它们统称为"32构建之法"。

在这一小节中，我将把重心主要放在网格布局中所有用到的27个属性名的讲解上，而取值逻辑将在最后一部分进行统一介绍。

父容器

定框架

设置父容器的网格布局的第一步就是将父容器的盒模型设置为grid，这样就能触发渲染引擎的网格布局算法。

.parent {

display: grid;

}

接着我们要开始准备"画线"，即设置所需行和列的基础线。这些线条将构成我们接下来进行布局排布的基础模板(template)。在画线过程中，我们需要分别根据行(row)和列(column)两个维度进行设置。你需要画几条线，就设置几个值(不包括边框)，其取值是轨道(track)的大小。这里我先画出一个3x3的网格框架，代码如下:

.parent {

display: grid;

grid-template-rows: 100px 100px 100px;

grid-template-columns: 100px 100px 100px;

}

在这里你也可以选择使用缩写形式同时为行和列设置值，采用/分隔开:

.parent {

display: grid;

grid-template: 100px 100px 100px / 100px 100px 100px;

}

image.png

画完线后，下一步我们可以选择为这些线条和线条之间形成的网格区域(area)进行命名，这样在后续使用的时候就能直接使用这些名字，便于子元素的定位。

.parent {

display: grid;

grid-template-areas: "a a b"

"c d e"

"c d ."

}

上面这两步画线和命名同样可以采用缩写形式进行设置，代码如下：

.parent {

display: grid;

grid-template: "a a b" 101px

"c d e" 102px

"c d ." 103px / 104px 105px 105px

}

因为使用grid-template同时设置行列和区域名的写法比较复杂，为了讲解方便，我把值设置成规律的递增数字。其中(101, 102，103)设置的是grid-template-rows的值，而(104,105,106)设置的则是grid-template-columns的值。