<!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>grid-template-areas和grid-area
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章