文章目录
简介
Grid布局是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
其实我们完全可以将grid布局理解为更加灵活更加强大的table布局。
例如下图所示的布局,使用一般的布局方法很难实现,但是对于gird布局来说那就是so easy。
grid布局的常用属性
grid-template-columns / grid-template-row
这是gird布局最重要的属性,grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
对于其属性值的设置可以使用绝对单位,也可以使用百分比。
如下面的示例代码:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
除了这两种基本设置方式外,还有一些其它的设置方式,如使用repeat()函数,auto-fill 关键字,fr 关键字 等等。这里只是提到,更多的内容大家可以自行搜索获取。
grid-row-gap / grid-column-gap
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。
如下面示例代码:
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
grid-column / grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
- grid-column-start属性:左边框所在的垂直网格线
- grid-column-end属性:右边框所在的垂直网格线
- grid-row-start属性:上边框所在的水平网格线
- grid-row-end属性:下边框所在的水平网格线
如下面示例代码:
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
现场实操
gird布局的属性还有很多,这里也不一一进行列举,掌握上述的三大属性就足够实现一些常用的布局样式。
实现的效果图:
对的,就是给的样板图。
talk is cheap, show you my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
width: 800px;
height: 366px;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.item1 {
background-color: #d61208;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
padding-top: 20px;
padding-left: 20px;
color: white;
}
.item2 {
background-color: #1db992;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
padding-top: 20px;
padding-left: 20px;
color: white;
}
.item3 {
background-color: #095a2d;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
padding-top: 20px;
padding-left: 20px;
color: white;
}
.item4 {
background-color: #790c83;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
padding-top: 20px;
padding-left: 20px;
color: white;
}
.item5 {
background-color: #b9820b;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
padding-top: 20px;
padding-left: 20px;
color: white;l
}
</style>
</head>
<body>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
</body>
</html>
以上是完整代码,直接运行此html文件,效果图如下:
结语
看完这篇博客,不知大家有没有发现gird布局不仅很强大而且也是很容易上手,一些看似很难处理的网格类型布局,使用gird分分钟就可以搞定。
这篇博客只是讲述了gird布局的一些最常用的属性,更多的内容可以参看我下面给出的官方文档教程:https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
最后,如果大家有关于使用gird布局的疑问,欢迎评论区留言,我看到后会给予积极回复,大家一起共同进步!