<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .grid { display: grid; border: 1px solid gray; grid-template-columns: 100px 150px 50px 20px; grid-template-rows: 50px 100px 20px; } .grid > div { margin: 2px; } #a { background: #006; } #b { background: #009; } #c { background: #00c; } #d { background: #00f; } #e { background: #060; } #f { background: #090; } #g { background: #0c0; } #h { background: #0f0; } #i { background: #600; } #j { background: #900; } #k { background: #c00; } #l { background: #f00; } </style> </head> <body> <div class=grid> <div id=a></div> <div id=b></div> <div id=c></div> <div id=d></div> <div id=e dir=rtl></div> <div id=f dir=rtl></div> <div id=g dir=rtl></div> <div id=h dir=rtl></div> <div id=i></div> <div id=j dir=rtl></div> <div id=k></div> <div id=l dir=rtl></div> </div> </body> </html>