grid-gap-003.html (1557B)
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: subgrid with border-bottom and percentage 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="match" href="grid-gap-003-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; 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 auto; 27 gap: 20% 20%; 28 background: lightgrey; 29 grid-column: 2 / span 5; 30 grid-row: 2 / span 5; 31 min-width:10px; 32 min-height:0; 33 border: 0 solid lightblue; 34 border-bottom-width: 40px; 35 background: grey; 36 } 37 38 .subgrid > * { background: lightgrey; } 39 40 x { 41 min-width:10px; 42 min-height:0px; 43 } 44 x:nth-child(2n+1) { background: silver; } 45 x:nth-child(2n+2) { background: magenta; } 46 x:nth-child(2n+3) { background: pink; } 47 x:nth-child(2n+4) { background: grey; } 48 49 e { display:block; width: 20px; height:15px; background:black; } 50 51 </style> 52 </head> 53 <body> 54 55 <div class="grid"> 56 <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> 57 <div class="subgrid"> 58 <c><e></e></c> 59 <d><e></e></d> 60 <c><e></e></c> 61 <d><e></e></d> 62 </div> 63 </div> 64 65 </body> 66 </html>