grid-item-dir-001.html (889B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .grid { 7 display: grid; 8 border: 1px solid gray; 9 grid-template-columns: 100px 150px 50px 20px; 10 grid-template-rows: 50px 100px 20px; 11 } 12 .grid > div { 13 margin: 2px; 14 } 15 #a { background: #006; } 16 #b { background: #009; } 17 #c { background: #00c; } 18 #d { background: #00f; } 19 #e { background: #060; } 20 #f { background: #090; } 21 #g { background: #0c0; } 22 #h { background: #0f0; } 23 #i { background: #600; } 24 #j { background: #900; } 25 #k { background: #c00; } 26 #l { background: #f00; } 27 </style> 28 </head> 29 30 <body> 31 <div class=grid> 32 <div id=a></div> 33 <div id=b></div> 34 <div id=c></div> 35 <div id=d></div> 36 <div id=e dir=rtl></div> 37 <div id=f dir=rtl></div> 38 <div id=g dir=rtl></div> 39 <div id=h dir=rtl></div> 40 <div id=i></div> 41 <div id=j dir=rtl></div> 42 <div id=k></div> 43 <div id=l dir=rtl></div> 44 </div> 45 </body> 46 </html>