一、是什么
Grid
布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列
擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系
这与之前讲到的flex
一维布局不相同
设置display:grid/inline-grid
的元素就是网格布局容器,这样就能出发浏览器渲染引擎的网格布局算法
<div class="container">
<div class="item item-1">
<p class="sub-item"></p >
</div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
上述代码实例中,.container
元素就是网格布局容器,.item
元素就是网格的项目,由于网格元素只能是容器的顶层子元素,所以p
元素并不是网格元素
这里提一下,网格线概念,有助于下面对grid-column
系列属性的理解
网格线,即划分网格的线,如下图所示:
上图是一个 2 x 3 的网格,共有3根水平网格线和4根垂直网格线
二、属性
同样,Grid
布局属性可以分为两大类:
- 容器属性,
- 项目属性
关于容器属性有如下: