下一篇网格布局介绍网格真是布局的神器。css在引入了Flex布局和Grid布局这两个模块之后才真正有了布局的概念。不知道最初的表格布局是个鬼东西，然后满天飞的是float，可能要用abosulte来实现页面的布局。总之，实现起来特别别扭，大家要时刻注意：我这样写会不会崩，会不会影响后面的元素，尼玛为什么还串在一起。作者大胆的把这些实现称为layouttricks，Flex和Grid才是真正的layout。Flex负责一维布局，Grid负责二维布局。两种布局都很厉害，只是一个比一个难，而且属性多到让人想吐血。谁让人认为模块不是属性？今天我们只围绕下图介绍Grid布局的概念。GridcontainerGrid布局开始的地方，grid模块的载体。从外面看，它看起来像一个块或一个内联块块，容器内部是一个格子。和Flex布局一样，也分为容器属性和项属性。网格线网格线有横线和竖线之分，纵横交错的线将网格容器切割成最小的单元格。网格线从数字1开始编号。上图中有6条水平线和6条垂直线。如果你喜欢，你也可以给线程命名，一个线程可以有多个名字。GridCell图中绿色背景的方块就是cell，是网格布局的最小度量单位，容器一共有25个cell。网格轨道相邻两条网格线的中间部分为轨道。为什么会有赛道的概念？因为track的宽度需要设置，如果在cell上单独设置width和height，很可能会变成瀑布呼啸而过的复杂度。再看一下上图中的浅蓝色和浅粉色轨道，感受一下。网格区存在网格线、单元格、轨道的意义是将容器划分到你需要的网格区。一个region就是一个可以包含多个cell的整块，那么怎么划分呢？两条水平网格线和两条垂直网格线的交点就是区域。如果把容器合理的划分成多个区域，那么布局的目的也就达到了。区域可以重叠，所以它有一个z-index。今天的概念部分就介绍到这里。后面会详细介绍网格布局编程相关的知识。ps：图片摘自CSSGridLayout:WhatisaGridLayoutCompanion文章深入理解布局神器flexbox
