grid-gap-009.html (1145B)
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 orthogonal writing-mode subgrids with percentage row-gap</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-009-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/200px auto; 21 border:3px solid; 22 background:grey; 23 width:300px; 24 height:400px; 25 } 26 .subgrid { 27 display: grid; 28 grid: subgrid / 50px; 29 row-gap: 10%; 30 grid-area: span 2/span 2; 31 background:lightgrey; 32 } 33 span { background:cyan; } 34 35 .hl { writing-mode: horizontal-tb; direction:ltr; } 36 .vlr { writing-mode: vertical-lr; direction:rtl; } 37 </style> 38 </head> 39 <body> 40 41 <div class="grid"> 42 <div class="subgrid vlr"> 43 <span class="hl">cc</span> 44 </div> 45 </div> 46 47 </body> 48 </html>