layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

.wraper{
display: grid;
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px;
grid-template-rows: 40px 40px 40px 40px 40px 40px;
margin-left:400px ;
grid-gap: 5px;

}
.one{
grid-column: 5/6;
grid-row:2/3;
border: 2px solid pink;
background-color: pink;
}
.two{
grid-column: 4/5;
grid-row:1;
border: 2px solid pink;
background-color: pink;
}
.three{
grid-column: 3/4;
grid-row:1;
border: 2px solid pink;
background-color: pink;
}
.four{
grid-column: 2/3;
grid-row:1;
border: 2px solid pink;
background-color: pink;
}
.five{
grid-column: 2/3;
grid-row:2;
border: 2px solid pink;
background-color: pink;
}
.six{
grid-column: 2/3;
grid-row:3;
border: 2px solid pink;
background-color: pink;
}
.seven{
grid-column: 3/4;
grid-row:4;
border: 2px solid pink;
background-color: pink; } .eight{ grid-column:4/5; grid-row:5; border: 2px solid pink; background-color: pink; } .nine{ grid-column: 5/6; grid-row:6; border: 2px solid pink; background-color: pink; } .ten{ grid-column: 6/7; grid-row:5; border: 2px solid pink; background-color: pink; } .eleven{ grid-column: 7/8; grid-row:4; border: 2px solid pink; background-color: pink; } .twele{ grid-column: 8/9; grid-row:3; border: 2px solid pink; background-color: pink; } .thirteen{ grid-column: 8/9; grid-row:2; border: 2px solid pink; background-color: pink; } .fourteen{ grid-column: 8/9; grid-row:1; border: 2px solid pink; background-color: pink; } .fifty{ grid-column:7/8; grid-row:1; border: 2px solid pink; background-color: pink; } .sixty{ grid-column: 6/7; grid-row:1; border: 2px solid pink; background-color: pink; } </style></head><body><div class="wraper"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div><div class="seven"></div><div class="eight"></div><div class="nine"></div><div class="ten"></div><div class="eleven"></div><div class="twele"></div><div class="thirteen"></div><div class="fourteen"></div><div class="fifty"></div><div class="sixty"></div></div></body></html>
原文地址:https://www.cnblogs.com/xiou/p/9711481.html