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

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

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

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

布局之道

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

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

row line: 行线

column line: 列线

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

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

cell: 网格单元格,由行线和列线所分隔出来

你可能感兴趣的:(html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略)