前言

继flex布局被广泛应用后,grid布局开始在各大浏览器中被支持。所以开始了对grid布局的初步学习。 顾名思义,grid(网格布局)是将布局划分成网状图去分布。而可以想象的是,一个网格具备的属性会包括网格线、网格单元、网格区域、行、列这些属性。下面我们先全面的了解一下网格布局的一些术语。

网格布局中的术语

网格容器

和弹性布局一样,网格布局也有一个容器去包含要布局的内容,也是在这个容器上去设置网格布局。

网格项

网格容器的直接子项,可以在子项里设置他们在容器中的位置大小等等。

网格线

用来把网格容器划分成一个个网格单元。虽说是线的概念,但实际呈现方式是以空白区域的形式。

网格轨道

简单理解为行列,指相邻网格线间的空间。

网格单元格

被网格线划分成的每一个格子。

网格区域

多个网格单元格组成的一个区域

网格布局中的属性总览

网格容器的属性

网格项的属性

网格容器属性详解

1.display:grid / inline-grid 将元素设置成grid布局的上下文 2.grid-template-columns / grid-template-rows 取值:[line-name]

子元素 网格项的属性解析

前言:float、display:inline-block / table-cell、vertical-align、column-*属性对网格项无效。

1.grid-column-start / grid-column-end / grid-row-start / grid-row-end 通过指定四条网格线形成一个密闭区域作为网格项在网格容器中的位置。 取值:网格线的编号或名称 | span

其他:grid也有部分属性支持动画,但暂未全部支持。

参考文献:https://www.css88.com/archives/8510 CSS Grid 布局完全指南(图解 Grid 详细教程)