css display: grid属性grid-template-areas
生活随笔
收集整理的這篇文章主要介紹了
css display: grid属性grid-template-areas
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<style>
.container {border:none;display: grid;height: 600px;grid-template-columns: 200px 1fr; /*兩列，第一列200px，第二列自適應(yīng)*/grid-template-rows: 50px 1fr 30px; /*三行：第一行：50px,第二行：自適應(yīng)，第三行：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屬性用于在網(wǎng)格布局中設(shè)置網(wǎng)格項目的大小和位置。 此屬性還用于為網(wǎng)格項設(shè)置名稱。*/
}
.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>
效果如下:
總結(jié)
以上是生活随笔為你收集整理的css display: grid属性grid-template-areas的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机械键盘达尔优A98_win和alt键互
- 下一篇： 一文搞懂SDIO