CSS gird布局

最新推荐文章于 2024-07-18 11:31:54 发布

奇喑

最新推荐文章于 2024-07-18 11:31:54 发布

阅读量745

点赞数 1

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/asd0356/article/details/110739962

版权

前端专栏收录该内容

70 篇文章 8 订阅

订阅专栏

文章目录

简介
grid布局的常用属性
现场实操
结语

简介

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布局的疑问，欢迎评论区留言，我看到后会给予积极回复，大家一起共同进步！

奇喑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS gird布局

文章目录简介grid布局的常用属性grid-template-columns / grid-template-rowgrid-row-gap / grid-column-gapgrid-column / grid-row现场实操结语简介Grid布局是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线
复制链接

扫一扫

专栏目录