CSS Grid布局

之前一直用flex布局，第一次采用grid布局完成一个页面，兼容IE 10+ Chrome Firefox最新版本，在此总结下。

what Grid

CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式。

浏览器支持情况

术语

• Grid Container

设置了 display: gird 的元素

• Grid Item

Grid 容器的孩子（直接子元素）

• Grid Line

它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”）

• Grid Cell

它是网格的一个“单元”

• Grid Area

网格区域可以由任意数量的网格单元组成

• Grid Track

你可以把它们想象成网格的列或行

父容器属性

• display : grid / inline-grid /subgrid