grid-gap-007.html (1284B)
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: nested ortogonal writing-mode subgrids</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="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 <link rel="match" href="grid-gap-007-ref.html"> 13 <style> 14 html,body { 15 color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; 16 } 17 18 .grid { 19 display:inline-grid; 20 grid:100px auto/100px auto; 21 gap:20px; 22 border:3px solid; 23 background:yellow; 24 } 25 span { background:cyan; } 26 span:nth-child(2n+1) { background:grey; } 27 28 .hl { writing-mode: horizontal-tb; direction:ltr; } 29 .vrl { writing-mode: vertical-rl; direction:ltr; } 30 </style> 31 </head> 32 <body> 33 34 <div class="grid"> 35 <div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink"> 36 <div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey"> 37 <span>a</span><span>b</span> 38 </div> 39 <span style="grid-area:1/2">ccc</span> 40 </div> 41 </div> 42 43 </body> 44 </html>