rtl-grid-placement-definite-001.html (1011B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 8 9 .grid1, .grid2 { 10 display: grid; 11 grid-template-areas: 12 '. . a a a .' 13 '. . a a a .' 14 '. b b . . .' 15 ; 16 border: 2px solid green; 17 grid-template-columns: 20px 20px 20px 20px; 18 grid-template-rows: 20px 20px 20px; 19 grid-auto-flow: column dense; 20 grid-auto-columns: 20px; 21 grid-auto-rows: 20px; 22 } 23 24 .grid2 { 25 border-width: 20px; 26 } 27 28 span { 29 background: lime; 30 border: 1px solid black; 31 } 32 33 .a { 34 grid-area: a; 35 } 36 .b { 37 grid-column: 2 / span 3; 38 grid-row: b; 39 } 40 .c { 41 grid-column: span 3; 42 } 43 .d { 44 grid-row: span 3; 45 } 46 </style> 47 </head> 48 <body dir=rtl> 49 50 <div class=grid1> 51 <span class=a>a</span> 52 <span class=b>b</span> 53 <span class=c>c</span> 54 <span class=d>d</span> 55 </div> 56 57 <div class=grid2> 58 <span class=a>a</span> 59 <span class=b>b</span> 60 <span class=c>c</span> 61 <span class=d>d</span> 62 </div> 63 64 </body> 65 </html>