<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: grid;
/* grid-template-columns: 100px 100px 100px; 设置列宽度*/
/* grid-template-columns: 1fr 1fr 1fr; grid浮动宽度,三列各占1/3*/
/* column-gap: 1px; 列间距*/
/* row-gap: 1px; 行间距*/
/* gap: 1px; 所有间距*/
/* grid类似于flex布局,有align-items和justify-items(对齐子元素)
align-content和justify-content (对齐轨道)*/
}
.layout{
width: 200px;
height: 200px;
display: grid;
grid-template-areas:
"header header header"
"sider content content"
"footer footer footer";
}
header{
background-color: red;
grid-area: header;
}
aside{
background-color: sandybrown;
grid-area: sider;
}
main{
background-color: skyblue;
grid-area: content;
}
footer{
background-color: springgreen;
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
<div class="column4"></div>
<div class="column5"></div>
<div class="column6"></div>
</div>
<div class="layout">
<header>头部</header>
<aside>侧边栏</aside>
<main>内容</main>
<footer>底部</footer>
</div>
</body>
</html>
CSS grid布局
最新推荐文章于 2024-07-18 11:31:54 发布