网格布局display: grid；

什么是网格布局是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel）网格布局是CSS3的布局系统与弹性布局类似网格可以理解成是二维布局（弹性布局是一维的）可以使用align-item justify-content等属性IE11部分支持display:grid 设置该元素为网格容器display: grid;grid-template-columns：列宽&l

加油，铁子！

30050人浏览 · 2021-08-12 22:44:01

加油，铁子！ · 2021-08-12 22:44:01 发布

什么是网格布局？

是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel）

网格布局是CSS3的布局系统

与弹性布局类似

网格可以理解成是二维布局（弹性布局是一维的）

可以使用align-item justify-content等属性

IE11部分支持

display:grid 设置该元素为网格容器

display: grid;

grid-template-columns：列宽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>grid</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				/* 网格 */
				display: grid;
				/* 设置列宽 */
				/* grid-template-columns: 200px 200px 200px; */
				/* grid-template-columns: 200px auto 200px; */
				/* grid-template-columns: auto auto auto; */
				/* grid-template-columns: repeat(3,auto); */
				/* grid-template-columns: repeat(3,100px); */
				grid-template-columns: 1fr 3fr 1fr;
				
			}
			li{
				height: 200px;
				background-color: #eee;
				box-shadow: 0 0 3px gray;
				font-size: 3rem;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
		</ul>
	</body>
</html>

grid-template-rows：行高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>grid</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				/* 网格 */
				display: grid;
				/* 设置列宽 */
				grid-template-columns: repeat(3,auto);
				/* 设置间距 */
				grid-gap: 1rem;
				/* 行高 */
				grid-template-rows: 1fr 2fr 3fr;
			}
			li{
				height: 50px;
				background-color: #eee;
				box-shadow: 0 0 3px gray;
				font-size: 3rem;
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
			<li>item6</li>
			<li>item7</li>
			<li>item8</li>
			<li>item9</li>
		</ul>
	</body>
</html>

grid-gap：间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>grid</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				/* 网格 */
				display: grid;
				/* 设置列宽 */
				grid-template-columns: 200px 200px 200px;
				/* 设置间距 */
				grid-gap: 20px;
			}
			li{
				height: 200px;
				background-color: #eee;
				box-shadow: 0 0 3px gray;
				font-size: 3rem;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
		</ul>
	</body>
</html>

跨行跨列

grid-column-start: 1 列从哪个开始

grid-column-end: 3 列到哪个结束（不包含）

grid-column: 1 / span 3 从第一根线开始，合并3个单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨行与跨列</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				display: grid;
				grid-template-columns: repeat(5,auto);		
			}
			li{
				height: 150px;
				background-color: #eee;
				border: 1px solid gray;
				font-size: 2rem;
				text-align: center;
				line-height: 150px;
			}
			li:nth-of-type(1){
				/* 列合并 */
				/* grid-column-start: 1;
				grid-column-end: 5; */
				grid-column: 1 / span 4;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
			<li>item6</li>
			<li>item7</li>
			<li>item8</li>
			<li>item9</li>
			<li>item10</li>
			<li>item11</li>
			<li>item12</li>
			<li>item13</li>
			<li>item14</li>
			<li>item15</li>
			<li>item16</li>
			<li>item17</li>
			<li>item18</li>
			<li>item19</li>
			<li>item20</li>
		</ul>
	</body>
</html>

grid-row-start: 1 行从哪个开始

grid-row-end: 3 行到哪个结束（不包含）

grid-row: 1 / span 3 同上

效果：

li:nth-of-type(1){
				/* 行合并 */
				/* grid-row-start: 1;
				grid-row-end: 4; */
				grid-row: 1 / span 4;
			}

minmax函数

minmax(300px, 600px) 不小于300px 不大于600px

效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				display: grid;
				/* minmax函数 */
				grid-template-columns: repeat(auto-fit,minmax(200px,1fr));		
			}
			li{
				background-color: #eee;
				border: 1px solid gray;
				font-size: 2rem;
				text-align: center;
				line-height: 150px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
			<li>item6</li>
		</ul>
	</body>
</html>

自定义网格模板

grid-template-areas: 模板样式

grid-area: 选择模板

效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络模板</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.wrap{
				display: grid;
				grid-template-areas: 'header header header' 
				'info info info'
				'shi1 shi2 shi3'
				'footer footer footer';
				grid-gap: 1rem;
			}
			header,.info,article,footer{
				box-shadow:0 0 3px gray;
				padding: 2rem;
				text-align: center;
			}
			header{
				grid-area: header;
			}
			.info{
				grid-area: info;
			}
			.shi1{
				grid-area: shi1;
			}
			.shi2{
				grid-area: shi2;
			}
			.shi3{
				grid-area: shi3;
			}
			footer{
				grid-area: footer;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<header>
				<h1>李白</h1>
			</header>
			<div class="info">
				<h2>简介</h2>
				<p>李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，
				为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；
				杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。“  《旧唐书》记载李白为山东人  ；
				《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友  。
				李白有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首。 
				 李白所作词赋，宋人已有传记（如文莹《湘山野录》卷上），就其开创意义及艺术成就而言，“李白词”享有极为崇高的地位。 </p>
			</div>
			<article class="shi1">
				<h3>渡荆门送别</h3>
				<p>
					渡远荆门外，来从楚国游。
					山随平野尽，江入大荒流。
					月下飞天镜，云生结海楼。
					仍怜故乡水，万里送行舟。
				</p>
			</article>
			<article class="shi2">
				<h3>望天门山</h3>
				<p>
					天门中断楚江开，碧水东流至此回。
					两岸青山相对出，孤帆一片日边来。
				</p>
			</article>
			<article class="shi3">
				<h3>独坐敬亭山</h3>
				<p>
					众鸟高飞尽，孤云独去闲。
					相看两不厌，只有敬亭山。
				</p>
			</article>
			<footer>
				<p>……</p>
			</footer>
		</div>
	</body>
</html>

媒体查询

@media

实现响应式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网格布局响应式</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.wrap{
				display: grid;
				grid-template-columns: repeat(4,auto);
				grid-gap: 1rem;
			}
			.item{
				height: 200px;
			}
			@media screen and (min-width:765px) and (max-width:1200px) {
				.wrap{
					display: grid;
					grid-template-columns: repeat(3,auto);
					grid-gap: 1rem;
				}
			}
			@media screen and (min-width:500px) and (max-width:768px) {
				.wrap{
					display: grid;
					grid-template-columns: repeat(2,auto);
					grid-gap: 1rem;
				}
			}
			@media screen and (max-width:500px) {
				.wrap{
					display: grid;
					grid-template-columns:1fr;
					grid-gap: 1rem;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item" style="background-color:gold;"></div>
			<div class="item" style="background-color:pink;"></div>
			<div class="item" style="background-color:greenyellow;"></div>
			<div class="item" style="background-color:skyblue;"></div>
			<div class="item" style="background-color:hotpink;"></div>
			<div class="item" style="background-color:yellowgreen;"></div>
			<div class="item" style="background-color:lightblue;"></div>
			<div class="item" style="background-color:lightgray;"></div>
		</div>
	</body>
</html>