orthogonal-writing-mode-001.html (2368B)
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>CSS Grid Test: subgrids with different writing-mode than parent</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="orthogonal-writing-mode-001-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; 15 } 16 17 .grid { 18 display: grid; 19 grid: repeat(4, auto) / repeat(5, auto); 20 place-content: start; 21 border: 1px solid; 22 } 23 24 .subgrid { 25 display: grid; 26 grid: subgrid / auto; 27 background: lightgrey; 28 grid-column: 2 / span 5; 29 grid-row: 2 / span 5; 30 min-width:10px; 31 min-height:0; 32 border: 0 solid lightblue; 33 border-bottom-width: 40px; 34 } 35 36 .vlr { 37 writing-mode: vertical-lr; 38 grid: auto / subgrid; 39 grid-column: 2 / span 5; 40 grid-row: 3 / span 5; 41 background: blue; 42 } 43 44 x { 45 min-width:10px; 46 min-height:0px; 47 } 48 x:nth-child(2n+1) { background: silver; } 49 x:nth-child(2n+2) { background: grey; } 50 x:nth-child(2n+3) { background: pink; } 51 x:nth-child(2n+4) { background: black; } 52 53 .hl { writing-mode: horizontal-tb; direction:ltr; } 54 .hr { writing-mode: horizontal-tb; direction:rtl; } 55 .vl { writing-mode: vertical-lr; } 56 .vr { writing-mode: vertical-rl; } 57 .vlr { writing-mode: vertical-lr; direction:rtl; } 58 .vrl { writing-mode: vertical-rl; direction:ltr; } 59 60 </style> 61 </head> 62 <body> 63 64 <div class="grid"> 65 <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> 66 <div class="subgrid vrl" style="text-indent:10px"> 67 A B 68 </div> 69 </div> 70 71 <div class="grid"> 72 <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> 73 <div class="subgrid vr"> 74 <div class="subgrid hr">A B</div> 75 </div> 76 </div> 77 78 <div class="grid"> 79 <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> 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>