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; }