orthogonal-writing-mode-001-ref.html (2246B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: subgrids with different writing-mode than parent</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:12px/1 monospace; 13 } 14 15 .grid { 16 display: grid; 17 grid: repeat(4, auto) / repeat(5, auto); 18 place-content: start; 19 border: 1px solid; 20 } 21 22 .subgrid { 23 display: grid; 24 grid: auto / auto; 25 background: lightgrey; 26 grid-column: 2 / span 5; 27 grid-row: 2 / span 5; 28 min-width:10px; 29 min-height:0; 30 border: 0 solid lightblue; 31 border-bottom-width: 40px; 32 } 33 34 .vlr { 35 writing-mode: vertical-lr; 36 grid: auto / auto; 37 grid-column: 2 / span 5; 38 grid-row: 3 / span 5; 39 background: blue; 40 } 41 42 x { 43 min-width:10px; 44 min-height:0px; 45 } 46 x:nth-child(2n+1) { background: silver; } 47 x:nth-child(2n+2) { background: grey; } 48 x:nth-child(2n+3) { background: pink; } 49 x:nth-child(2n+4) { background: black; } 50 51 .hl { writing-mode: horizontal-tb; direction:ltr; } 52 .hr { writing-mode: horizontal-tb; direction:rtl; } 53 .vl { writing-mode: vertical-lr; } 54 .vr { writing-mode: vertical-rl; } 55 .vlr { writing-mode: vertical-lr; direction:rtl; } 56 .vrl { writing-mode: vertical-rl; direction:ltr; } 57 58 </style> 59 </head> 60 <body> 61 62 <div class="grid"> 63 <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> 64 <div class="subgrid vrl" style="text-indent:10px"> 65 A B 66 </div> 67 </div> 68 69 <div class="grid"> 70 <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> 71 <div class="subgrid vr"> 72 <div class="subgrid hr">A B</div> 73 </div> 74 </div> 75 76 <div class="grid"> 77 <x style="grid-row:3; height:50px; background:black"></x> 78 <x style="grid-row:4; height:50px; background:pink"></x> 79 <x style="grid-row:5; height:40px; background:black"></x> 80 <div class="subgrid vlr"> 81 <div class="subgrid hl"> 82 <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x> 83 </div> 84 </div> 85 </div> 86 87 88 </body> 89 </html>