<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } .grid1, .grid2 { display: grid; grid-template-areas: '. . a a a .' '. . a a a .' '. b b . . .' ; border: 2px 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; } .grid2 { border-width: 20px; } 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 dir=rtl> <div class=grid1> <span class=a>a</span> <span class=b>b</span> <span class=c>c</span> <span class=d>d</span> </div> <div class=grid2> <span class=a>a</span> <span class=b>b</span> <span class=c>c</span> <span class=d>d</span> </div> </body> </html>