CSS的GRID布局基础

最新推荐文章于 2025-05-09 16:47:21 发布
xvzhengyang
最新推荐文章于 2025-05-09 16:47:21 发布
阅读量222
点赞数 1
分类专栏：前端 HTML与CSS 布局文章标签： CSS grid 网格布局
前端同时被 3 个专栏收录
80 篇文章
订阅专栏
HTML与CSS
14 篇文章
订阅专栏
布局
13 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的GRID布局</title>
		<!-- Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。
			 目前主流浏览器都支持了网格布局,今天我们学习一下简单的网格布局的基础知识
			 1.网格布局由两个核心部分组成,分别是wrapper(父元素)和items(子元素);wrapper是实际的grid(网格),items是网格里面的内容
		 -->
		<style type="text/css">
			.wrapper1 {
				display: grid;
				/* 要将wrapper元素变成一个grid,只要设置display为grid */
			}

			.item1 {
				background-color: #0000FF;
				text-align: center;

			}

			.item2 {
				background-color: #008000;
				text-align: center;
			}

			.item3 {
				background-color: #00FFFF;
				text-align: center;
			}

			.item4 {
				background-color: #FF00FF;
				text-align: center;
			}

			.item5 {
				background-color: #FFFF00;
				text-align: center;
			}

			.item6 {
				background-color: #E6A43F;
				text-align: center;
			}

			.wrapper2 {
				display: grid;
				/* 要将wrapper元素变成一个grid,只要设置display为grid */
				grid-template-columns: 100px 100px 100px;
				/* 三列 */
				grid-template-rows: 50px 50px;
				/* 两行 */

			}

			.wrapper3 {
				display: grid;
				/* 要将wrapper元素变成一个grid,只要设置display为grid */
				grid-template-columns: 100px 50px 300px;
				/* 三列 */
				grid-template-rows: 50px 30px;
				/* 两行 */
			}

			.wrapper4 {
				display: grid;
				/* 要将wrapper元素变成一个grid,只要设置display为grid */
				grid-template-columns: 100px 100px 100px;
				/* 三列 */
				grid-template-rows: 50px 50px 50px;
				/* 两行 */

			}

			.item7 {
				background-color: red;
				text-align: center;
				grid-column-start: 1;
				grid-column-end: 4;
			}

			.item8 {
				background-color: red;
				text-align: center;
				/* 上面列从第一个网格线到第四个网格线的简写 */
				grid-column: 1 / 4;
			}

			.wrapper5 {
				display: grid;
				/* 要将wrapper元素变成一个grid,只要设置display为grid */
				grid-template-columns: 100px 100px 100px;
				/* 三列 */
				grid-template-rows: 50px 50px;
				/* 两行 */

			}
/* -- 1.第一个item占据两列
				 2.第二个item占据一列
				 3.第三个item占据两行
				 4.第四个item占据两列
				 5.第五、第六个item分别都是一列
				  */
			.item9 {
				background-color: #0000FF;
				text-align: center;
				grid-column-start: 1;
				grid-column-end: 3;
			}

			.item10 {
				background-color: #008000;
				text-align: center;
			}

			.item11 {
				background-color: #00FFFF;
				text-align: center;
				grid-row-start: 2;
				grid-row-end: 4;
			}

			.item12 {
				background-color: #FF00FF;
				text-align: center;
				grid-column-start: 2;
				grid-column-end: 4;
			}

			.item13 {
				background-color: #FFFF00;
				text-align: center;
			}

			.item14 {
				background-color: #E6A43F;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 我们先来看一个简单的例子,下面是一个wrapper元素包含6个item -->
		<div class="wrapper1">
			<div class="item1">
				one
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<!-- 上面我们还没有定义grid的样子,所以只是简单的将6个div堆叠在一起 -->
		<br>
		<!-- columns列,rows行
			 为了得到一个二维的网格布局,我们需要定义行和列;
			 grid-template-columns 列 (这里是写列的宽度,有几列就写几个宽度,宽度可以不是相同大小;空格区分)
			 grid-template-rows 行 (这里是写行的高度,有几列就写几个宽度,宽度可以不是相同大小;空格区分)
		 -->
		<div class="wrapper2">
			<div class="item1">
				one
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<br>
		<!-- 举例,这里我们不再写相同的宽度和高度;可以看到第三个grid,宽度和高度都发生了变化; -->
		<div class="wrapper3">
			<div class="item1">
				one
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<br>
		<!-- 下面我们来看如何放置items,这里才是体现网格布局的强大之处;因为网格布局使得创建布局极其简单 -->
		<!-- 这里行和列我们都设置成 3*3 
		...,我们明明设置的是三行三列,这里怎么只有两行三列呢;因为这里我们只有6个item,如果有9个那么第三行会被铺满
		 -->
		<div class="wrapper4">
			<div class="item1">
				one
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<br>
		<!-- 接下来看,如何定位和调整item的大小 -->
		<!-- 本例,我们希望第一个item占据从第一条网格线开始到第四条网格线结束;也就是第一个item占据一整行
		          grid-column-start: 1;
              grid-column-end: 4;
							PS:一列是由两个网格线组成的; 另外就是当第一个item占据一行的时候,会把下面的item往下推一行
		 -->
		<div class="wrapper4">
			<div class="item7">
				seven
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<br>
		<!-- 上面的item7的可以换一个更简单的写法 -->
		<div class="wrapper4">
			<div class="item8">
				eight
			</div>
			<div class="item2">
				two
			</div>
			<div class="item3">
				three
			</div>
			<div class="item4">
				four
			</div>
			<div class="item5">
				five
			</div>
			<div class="item6">
				six
			</div>
		</div>
		<br>
		<!-- 下面是小例子巩固一下 -->
		<!-- 1.第一个item占据两列
				 2.第二个item占据一列
				 3.第三个item占据两行
				 4.第四个item占据两列
				 5.第五、第六个item分别都是一列
				 -->
		<div class="wrapper4">
			<div class="item9">
				nine
			</div>
			<div class="item10">
				ten
			</div>
			<div class="item11">
				eleven
			</div>
			<div class="item12">
				twelve
			</div>
			<div class="item13">
				thirteen
			</div>
			<div class="item14">
				forteen
			</div>
		</div>
	</body>
	<!-- 这里只是最简单的grid布局概念; PS:非原创,学习别人的;后面会继续学习网格布局 -->
</html>