<style>
.container {
border:none;
display: grid;
height: 600px;
grid-template-columns: 200px 1fr; /*两列,第一列200px,第二列自适应*/
grid-template-rows: 50px 1fr 30px; /*三行:第一行:50px,第二行:自适应,第三行:30px*/
row-gap: 3px; /*行间距*/
column-gap: 3px; /*列间距*/
grid-template-areas: "toubu toubu"
"daohang main"
"daohang yejiao";
}
.item {
box-shadow: 0 0 5px #CCCCCC;
padding:5px;
text-align: center;
}
.header {
grid-area: toubu; /*grid-area属性用于在网格布局中设置网格项目的大小和位置。 此属性还用于为网格项设置名称。*/
}
.nav{
grid-area: daohang;
}
.footer {
grid-area: yejiao;
}
.main {
grid-area: main
}
</style>
<div class="container">
<div class="item header">头部</div>
<div class="item nav">导航</div>
<div class="item footer">页脚</div>
<div class="item main">主体部分</div>
</div>
效果如下: