<!DOCTYPE HTML> <html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .grid { display: grid; grid-template-areas: '. . a a a .' '. . a a a .' '. b b . . .' ; border: 10px solid green; grid-template-columns: 20px 20px 20px 20px; grid-template-rows: 20px 20px 20px; grid-auto-flow: column dense; grid-auto-columns: 20px; grid-auto-rows: 20px; font-size:12px; } span { background: lime; border: 1px solid black; } .a { grid-area: a; } .b { grid-column: 2 / span 3; grid-row: b; } .c { grid-column: span 3; } .d { grid-row: span 3; } </style> </head> <body> <div class=grid> <span class=a>a</span> <span class=b>b</span> <span class=c>c</span> <span class=d>d</span> </div> </body> </html>