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