(九)Grid网格布局 (上)
1:基本概念 (Grid Layout)
-
二维的基于网格的布局系统 (同时处理列和行)
-
第一个专门为解决布局问题而生的CSS模块
-
Grid Container
- Grid容器 (设置了 display: gird 的元素).main { display: grid; }
-
Grid Item
- Grid容器成员 (直接子元素)<div class="main"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-
Grid Line
- Grid (行、列) 网格线垂直网格线 (column grid lines)
水平网格线 (row grid lines)
Grid Track
- 两个相邻网格线之间的空间
Grid Cell
- 两个相邻的行和两个相邻的列网格线之间的空间, 基础单元
Grid Area
- 四个网格线包围的总空间, 可以由任意数量的Grid Cell组成