grid-gap-008.html (1177B)
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 column-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-008-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: 500px; 25 } 26 .subgrid { 27 display: grid; 28 grid: 50px / subgrid; 29 column-gap: 10%; 30 grid-area: span 2/span 2; 31 justify-content:end; 32 background:lightgrey; 33 } 34 span { background:cyan; } 35 36 .hl { writing-mode: horizontal-tb; direction:ltr; } 37 .vlr { writing-mode: vertical-lr; direction:rtl; } 38 </style> 39 </head> 40 <body> 41 42 <div class="grid"> 43 <div class="subgrid vlr"> 44 <span class="hl">ccc</span> 45 </div> 46 </div> 47 48 </body> 49 </html>