福州网站建设>网站新闻>站长新闻

grid-template-columns使用教程

发布日期:2022-03-17浏览次数:58 来源:福州网站建设

!<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="container">
    <div class="item header">头部</div>
    <div class="item nav">导航</div>
    <div class="item footer">页脚</div>
    <div class="item main">主体部分</div>
</div>
<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>
</body>
</html>
站长新闻有关的文章
如果您有什么问题,欢迎咨询我们客服! 点击QQ咨询
欧美肥老太牲交大战