grid-gap-008-ref.html (806B)
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: 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="stylesheet" type="text/css" href="/fonts/ahem.css"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; 14 } 15 16 .grid { 17 display:inline-grid; 18 grid:100px 375px/300px; 19 border:3px solid; 20 width: 300px; 21 height: 500px; 22 background:lightgrey; 23 row-gap: 25px; 24 } 25 span { 26 grid-row:2; 27 background:cyan; 28 width:50px; 29 } 30 </style> 31 </head> 32 <body> 33 34 <div class="grid"> 35 <span>ccc</span> 36 </div> 37 38 </body> 39 </html>