grid-template-areas和grid-area

最新推荐文章于 2024-09-01 13:28:11 发布

弗兰克的天空

最新推荐文章于 2024-09-01 13:28:11 发布

阅读量2k

点赞数

分类专栏：网站前端

本文链接：https://blog.csdn.net/frank_fong/article/details/79640826

版权

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>grid</title>
<style>
/* grid-template-areas */
.container1 {
	display: grid;
	grid-template-columns: 50px 50px 50px 50px;
	grid-template-rows: 50px 100px 50px;
	grid-gap: 10px;
	grid-template-areas: 
	"header header header header"
	"sidebar . content content"
	"footer footer footer footer";
	background-color: #f5f5f5;
}
.container1 .header {
	grid-area: header;
	background-color: #faa;
}
.container1 .sidebar {
	grid-area: sidebar;
	background-color: #ffa;
}
.container1 .content {
	grid-area: content;
	background-color: #afa;
}
.container1 .footer {
	grid-area: footer;
	background-color: #aaf;
}
/* grid-area */
.container2 {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 50px 50px 50px 50px;
	grid-template-rows: 50px 100px 50px;
	background-color: #f5f5f5;
}
.container2 .header {
  grid-area: 1 / 1 / 2 / 5; /* 相当于用轴线 x/y/x/y 定位出区域 */
  background-color: #faa;
}
.container2 .sidebar {
  grid-area: 2 / 1 / 3 / 2;
  background-color: #ffa;
}
.container2 .content {
  grid-area: 2 / 3 / 3 / 5;
  background-color: #afa;
}
.container2 .footer {
  grid-area: 3 / 1 / 3 / 5;
  background-color: #aaf;
}
</style>
</head>
<body>
<h3>grid-template-areas</h3>
<div class="container1">
	<div class="header">header</div>
	<div class="sidebar">sidebar</div>
	<div class="content">content</div>
	<div class="footer">footer</div>
</div>
<br>
<h3>grid-area</h3>
<div class="container2">
	<div class="header">header</div>
	<div class="sidebar">sidebar</div>
	<div class="content">content</div>
	<div class="footer">footer</div>
</div>
</body>
</html>