grid-template-columns使用教程
發布日期：2022-03-17瀏覽次數：824 來源：福州網站建設
!<!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>
以上是由福州網站建設的小編為你分享了"grid-template-columns使用教程"文章，如果你在這方面有什么問題，隨時聯系我們
微信便捷交流