orthogonal-writing-mode-002-ref.html (2372B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:12px/1 Ahem; 14 } 15 16 .grid { 17 display: grid; 18 grid: repeat(4, auto) / repeat(5, auto); 19 place-content: start; 20 border: 1px solid; 21 } 22 23 .subgrid { 24 display: grid; 25 grid: auto / auto; 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 background: yellow; 33 padding: 1px 3px 5px 7px; 34 margin: 3px 11px 7px 5px; 35 } 36 37 .vlr { 38 writing-mode: vertical-lr; 39 grid: auto / auto; 40 grid-column: 2 / span 5; 41 grid-row: 3 / span 5; 42 background: blue; 43 } 44 45 x { 46 min-width:10px; 47 min-height:0px; 48 } 49 50 x:nth-child(2n+1) { background: silver; } 51 x:nth-child(2n+2) { background: grey; } 52 x:nth-child(2n+3) { background: pink; } 53 x:nth-child(2n+4) { background: black; } 54 55 .hl { writing-mode: horizontal-tb; direction:ltr; } 56 .hr { writing-mode: horizontal-tb; direction:rtl; } 57 .vl { writing-mode: vertical-lr; } 58 .vr { writing-mode: vertical-rl; } 59 .vlr { writing-mode: vertical-lr; direction:rtl; } 60 .vrl { writing-mode: vertical-rl; direction:ltr; } 61 62 </style> 63 </head> 64 <body> 65 66 <div class="grid vrl"> 67 <x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x> 68 <div class="subgrid hl"> 69 <x style="grid-column:span 12">A _B</x> 70 <x style="width:100px; height:30px"></x> 71 <x style="background:yellow">C D_</x> 72 </div> 73 </div> 74 75 <div class="grid"> 76 <x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x> 77 <div class="subgrid vlr" style="grid: auto / repeat(5, auto);"> 78 <x>A _B</x> 79 <x style="width:100px; height:30px"></x> 80 <x>C D_</x> 81 </div> 82 </div> 83 84 <div class="grid"> 85 <x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x> 86 <div class="subgrid vlr"></div> 87 </div> 88 89 </body> 90 </html>