<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html><head> <meta charset="utf-8"> <title>CSS Grid Test: subgrid with border-bottom</title> <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> html,body { color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; } .grid { display: grid; grid: repeat(4, auto) / repeat(5, auto); place-content: start; border: 1px solid; } .subgrid { display: grid; grid: subgrid / auto; gap: 10px 20px; background: lightgrey; grid-column: 2 / span 5; grid-row: 2 / span 5; min-width:10px; min-height:0; background: yellow; } .subgrid > * { background: lightgrey; } x { min-width:10px; min-height:0px; } x:nth-child(2n+1) { background: silver; } x:nth-child(2n+2) { background: magenta; } x:nth-child(2n+3) { background: pink; } x:nth-child(2n+4) { background: grey; } e { border: 0 solid lightblue; border-bottom-width: 40px; margin: -5px 0; } </style> </head> <body> <div class="grid"> <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> <div class="subgrid"> <c>c</c> <d>d</d> <e></e> </div> </div> </body> </html>