网格布局grid 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 
 5   <head>
 6 
 7     <meta charset="UTF-8">
 8     <title>practise</title>
 9 
10     <link rel="stylesheet" href="grid.css">
11   </head>
12 
13 
14   <body>
15     <div>
16       <div class="wrapper">
17         <div class="one">1</div>
18         <div class="two">2</div>
19         <div class="three">3</div>
20         <div class="four">4</div>
21         <div class="five">5</div>
22         <div class="six">6</div>
23       </div>
24   </body>
25 
26 
27 </html>
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

.one {
  background: red;
  grid-area: 1/1/2/4;
}

.two {
  background: blue;
  grid-area: 2/1/5/2;
}

.three {
  background: green;
  grid-area: 2/2/3/3;
}

.four {
  background: black;
  grid-area: 3/2/4/3;
  color: white;
}

.five {
  background: yellow;
  grid-area: 4/2/5/3;
}

.six {
  background: #36c9ba;
  grid-area: 2/3/5/4;
}

 

posted on 2018-10-25 22:29  笛赋山中人  阅读(92)  评论(0)    收藏  举报

导航