前端Grid布局介绍(2)

运行结果：

容器和项目
我们通过再元素上声明display:grid或者display:inline-grid来创建一个容器网格，这个元素的所有直系3子元素将成为网格项目。
网格轨道
grid-template-columns和grid-template-rows属性来定义网格中的行和列
网格单元
一个网格单元是在一个网格元素中最小的单位，上图中One、Two、Three、Four…都是一个个的网格单元
网格线
划分网格的线即为网格线。需要注意的是，我们定义网格的时候，定义的是网格轨道。Grid会自动创建编号的网格线来定位每一个元素，m列有m 1根垂直的网格线，n行有n 1根水平网格线。一般而言，是从左到右，从上到下，1，2，3进行编号排序，从右到左，从下到上，则是按照-1，-2，-3…顺序进行编号排下序。

如果您想了解更多前端问题，可关注CRMEB,CRMEB专注于移动互联网软件设计、研发、销售为一体的高新技术企业，我们将竭诚为您服务。