Grid 布局是什么?
Grid
布局即网格布局,是一种新的 CSS
布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS
布局方案,是目前唯一一种 CSS
二维布局。利用 Grid
布局,我们可以轻松实现类似下图布局,演示地址[1]
![2822eda86c11958305e53fead1bf178f.png](https://i-blog.csdnimg.cn/blog_migrate/d344271c9b674ff5dd21f5143e41fc68.png)
Grid 布局和 flex 布局
讲到布局,我们就会想到 flex
布局,甚至有人认为竟然有 flex
布局了,似乎没有必要去了解 Grid
布局。但 flex
布局和 Grid
布局有实质的区别,那就是 flex
布局是一维布局,Grid
布局是二维布局。flex
布局一次只能处理一个维度上的元素布局,一行或者一列。Grid
布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。
Grid
布局远比 flex
布局强大!
![c48380e94da06a2a7172384fafddb68d.png](https://i-blog.csdnimg.cn/blog_migrate/63b6f94eb27887e41f19c1f10af2206e.png)
![c48380e94da06a2a7172384fafddb68d.png](https://i-blog.csdnimg.cn/blog_migrate/63b6f94eb27887e41f19c1f10af2206e.png)
Grid 的一些基础概念
我们使用 Grid 实现一个小例子,演示 Grid 的一些基础概念,演示地址[2]
<div class="wrapper">
<div class="one item">Onediv>
<div class="two item">Twodiv>
<div class="three item">Threediv>
<div class="four item">Fourdiv>
<div class="five item">Fivediv>
<div class="six item">Sixdiv>
div>
.wrapper {
margin: 60px;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 */
grid-template-columns: repeat(3, 200px);
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 */
grid-template-rows: 100px 200px;
}
.one {
background: #19CAAD;
}
.two {
background: #8CC7B5;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
![b7f8435af7e8fcf0b67fee710e779bef.png](https://i-blog.csdnimg.cn/blog_migrate/ad5e304e8b158f9704376464b8650861.png)
容器和项目:我们通过在元素上声明 display:grid
或 display:inline-grid
来创建一个网格容器。一旦我们这样做,这个元素的所有直系子元素将成为网格项目。比如上面 .wrapper
所在的元素为一个网格容器,其直系子元素将成为网格项目。
网格轨道:grid-template-columns
和 grid-template-rows
属性来定义网格中的行和列。容器内部的水平区域称为行,垂直区域称为列。上图中 One
、Two
、Three
组成了一行,One
、Four
则是一列
![afc52b7be9753e61a59159f1440826fe.png](https://i-blog.csdnimg.cn/blog_migrate/9a7f3d8926ddefba3f62d34d38838860.png)
网格单元:一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。上图中 One
、Two
、Three
、Four
...都是一个个的网格单元
网格线:划分网格的线,称为"网格线"。应该注意的是,当我们定义网格时,我们定义的是网格轨道,而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线,n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言,是从左到右,从上到下,1,2,3 进行编号排序。当然也可以从右到左,从下到上,按照 -1,-2,-3...顺序进行编号排序
![5d8eb6910188f482734d44527eebd1f8.png](https://i-blog.csdnimg.cn/blog_migrate/326ebd4aa222c9892b975447c7c85c02.png)
容器属性介绍
Grid
布局相关的属性以及值众多,需要记忆的不少,建议可以跟 demo
一起结合起来,边敲代码边理解,再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候,做个小 demo
演示,建议大家可以自己修改看看效果加深记忆
Grid
布局属性可以分为两大类,一类是容器属性,一类是项目属性。我们先来看容器属性
display 属性
display 属性演示[3]
我们通过在元素上声明 display:grid
或 display:inline-grid
来创建一个网格容器。声明 display:grid
则该容器是一个块级元素,设置成 display: inline-grid
则容器元素为行内元素
.wrapper {
display: grid;
}
![d938bbcf5cec58e7174bcb0b441e4474.png](https://i-blog.csdnimg.cn/blog_migrate/0ee016b3e0a44dbbdac38ae76a8d4d1c.png)
.wrapper-1 {
display: inline-grid;
}
![4460250257c312abf12d6741476d3ee5.png](https://i-blog.csdnimg.cn/blog_migrate/632c658497972f64b555c60dcccbf518.png)
grid-template-columns 属性和 grid-template-rows 属性
grid-template-columns 和 grid-template-rows 属性演示地址[4]
grid-template-columns
属性设置列宽,grid-template-rows
属性设置行高,这两个属性在 Grid
布局中尤为重要,它们的值是有多种多样的,而且它们的设置是比较相似的,下面针对 grid-template-columns