<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>

效果如下:

總結

以上是生活随笔為你收集整理的css display: grid属性grid-template-areas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。