一、是什么
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
布局属性可以分为两大类:
- 容器属性,
- 项目属性
关于容器属性有如下:
display 属性
文章开头讲到,在元素上设置display:grid
或 display:inline-grid
来创建一个网格容器
- display:grid 则该容器是一个块级元素
- display: inline-grid 则容器元素为行内元素
grid-template-columns 属性,grid-template-rows 属性
grid-template-columns
属性设置列宽,grid-template-rows
属性设置行高
.wrapper {
display: grid;
/* 声明了三列,宽度分别为 200px 20