<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.content {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 56px 40px 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 100vh;
width: 100vw;
}
.div1 {
grid-area: 1 / 1 / 4 / 3;
background: #e6ceac;
}
.div2 {
background: #ecad9e;
grid-area: 1 / 1 / 2 / 3;
}
.div3 {
background: #e6ceac;
grid-area: 2 / 1 / 4 / 2;
}
.div4 {
background: #bee7e9;
grid-area: 2 / 2 / 4 / 3;
}
.div5 {
background: #d1ba74;
grid-area: 2 / 2 / 3 / 3;
}
.div6 {
background: #efefef;
grid-area: 3 / 2 / 4 / 3;
padding: 10px;
}
.app-main {
height: 100%;
background-color: white;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 40px 1fr 50px;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.item1 {
background: #bee7e9;
grid-area: 1 / 1 / 4 / 3;
}
.item2 {
background: #d1ba74;
grid-area: 1 / 1 / 2 / 3;
}
.item3 {
background: #19caad;
grid-area: 2 / 1 / 3 / 3;
}
.item4 {
background: #ecad9e;
grid-area: 3 / 1 / 4 / 3;
}
.item5 {
background: #8cc7b5;
grid-area: 1 / 1 / 2 / 2;
}
.item6 {
background: #d1ba74;
grid-area: 1 / 2 / 2 / 3;
}
</style>
</head>
<body>
<div class="content">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">
<div class="app-main">
<div class="item1">11</div>
<div class="item2">22</div>
<div class="item3">33</div>
<div class="item4">44</div>
<div class="item5">55</div>
<div class="item6">66</div>
</div>
</div>
</div>
</body>
</html>
grid-area:grid-row-start
/grid-column-start /
grid-row-end
/grid-column-end
;
这四个属性可以按照上述格式写在一起,也可以分开写。
- grid-template-columns: 200px 1fr;
整个区域纵向分成两部分,第一部分为200px,剩下的宽度为第二部分
效果图: