grids 布局系统

grids 布局系统

我们之前有提到过网格系统，比如960s，bootstrap 的网格系统，但是这些网格系统都是模拟出来的（使用 float 或 flexbox），而并非天生的，虽然可以解决一些常见布局问题，但面临 Win10 UI 还是有点力所不及，如下图：

但是随着 CSS 的不断发展及完善，一种新的网格布局方式被纳入规范，它将会解决所有的网格问题，这就是我们要说的 CSS Grid Layout。

网格系统基础概念

在说 CSS Grid Layout 之前，我们先来看看 excel 的表格。

以我们的 Sheet1 的 A1 单元格为例，先是有上下左右四条线围着，然后定位是由竖直的 A 栏与横向的1行二维坐标表示 A1。如果有需要甚至还还可以和邻近的单元格合并。

现在我们提炼下上面的几个概念：线条，栏(竖直)，行(横向)，单元格，合并。接下来我们把这些概念对应到我们的网格系统：

• Grid Container：首先我们要设置父元素的布局为 grid，通过使用 display 属性给元素显式设置属性值grid或inline-grid，此时这个元素将自动变成网格容器，对应上图的Sheet1
• Grid Item：Item 是 container 的直接子元素，如果不考虑单元格的合并跟下面的 cell 是一样的，如果有单元格合并，在该 item 可能包括几个cell，对应上图的一个个格子，如蓝色的 A1
• Grid Lines：网格线分为水平线和垂直线，对应上图的橙色线条
• Grid Track：就是由lines构成的水平