网格布局

最新推荐文章于 2022-06-17 10:56:44 发布

dingsuojun4928

最新推荐文章于 2022-06-17 10:56:44 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/scg0624/p/9721370.html

版权

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
<title>网格</title>
<style type="text/css">
.wrapper{
display: grid;
grid-template-columns:100px 100px 100px 100px 100px;
grid-template-rows:100px 100px 100px 100px 100px;
}
.wrapper div{
background-color:pink;
color: #fff;
font-size: 150%;
padding: 20px;
margin: 10px;
}
.one{
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 2;
}
}
.two{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 5;
}
.three{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.four{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.five {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.six{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 5;
}
</style>

</head>
<body>
<section class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</section>
</body>
</html>