Grid(未完全完成)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link rel="stylesheet" type="text/css" href="three.css">
 9 </head>
10 </body>
11 </html>
12         <div class="box" id="one">One</div>
13         <div class="box" id="two">Two</div>
14         <div class="box" id="three">Three</div> 
15         <div class="box" id="four">Four</div>
16         <div class="box" id="five">five</div> 
17         <div class="box" id="six">six</div>
18         
19 </div >

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    color: white;
    background:greenyellow;
    color: rgb(16, 7, 29);
  }
  
  #one {
    position:relative;
    top: 20px;
    left: 20px;
    background:red;
  }
  #two {
    position:relative;
    top: 20px;
    left: 20px;
    background: blue;
  }
  #tree {
    position:relative;
    top: 20px;
    left: 20px;
    background:orange;
  }
  #four {
    position:relative;
    top: 20px;
    left: 20px;
    background:purple;
  }
  #five {
    position:relative;
    top: 20px;
    left: 20px;
    background:rgb(25, 5, 71);
  }
  #six {
    position:relative;
    top: 20px;
    left: 20px;
    background: pink;
  }

.wrapper{
    display:grid;
    text-align: center;
    grid-template-columns: 200px 50px 100px;
    grid-auto-rows: 100px 30px ;
}
.iteml{
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3{
    grid-column-start: 2;
    grid-column-end: 4;
}
.item4{
    grid-column-start: 2;
    grid-column-end: 4;
}

猜你喜欢