Grid布局

Grid布局

Grid布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域， 以及定义这些区域的大小、位置、层次等关系。号称是最强大的的CSS布局方案，是目前唯一-种 CSS二维布局。利用Grid布局,我们可以轻松实现类似下图布局

基础概念

容器和项目

当一个HTML元素将display属性设置为grid 或inline-grid后,它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

fr单位

轨道可以使用任何长度单位进行定义。

网格引入了fr单位来帮助我们创建灵活的网格轨道。- 个fr单位代表网格容器中可用空间的一等份。

以下实例定义了一个网格定 义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

网格单元

一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一一个单元格很像。

网格线

划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid会为我们创建编号的网格线来让我们来定位每一个网格元素。 m列有m+ 1根垂直的网格线，n行有n+ 1跟水平网格线。