Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/column-subgrid-extra-margin-006.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: Subgrid with no grid items accommodates gutter size and padding</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="match" href="column-subgrid-extra-margin-006-ref.html">
<style>
.wrapper {
width: 116px;
height: 100px;
background: red;
}
.grid-lanes {
display: inline-grid-lanes;
grid-template-columns: repeat(4, auto);
background: red;
}
.subgrid {
display: grid;
grid-template: auto / subgrid;
background: green;
padding: 11px 3px 9px 7px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div class="wrapper">
<!--
Grid lanes container width = 116px (4 columns of 29px each).
Each leaf is a span-1 subgrid nested two levels deep (leaf inside
inner1 or inner2 inside outer). The padding from every level of the
chain contributes to the leaf's margin. The leaf with the largest
total margin contribution ends up at:
leaf's pad-L (7) + inner's pad-L (7) + outer's pad-L (7) on the
start side, plus the leaf's pad-R (3) and half of outer's
column-gap (10/2 = 5) on the end side, for a total of 29.
Per the WG resolution at
an auto-placed grid-lanes chain must accommodate its margin
contribution at every column it could land in. Every column ends
up sized to the dominant leaf's 29px:
4 columns * 29px = 116px.
-->
<div class="grid-lanes">
<div class="subgrid" style="grid-column: span 4; gap: 20px 10px">
<div class="subgrid" style="grid-column: span 2;">
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
</div>
<div class="subgrid" style="grid-column: span 2;">
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
<div class="subgrid"></div>
</div>
</div>
</div>
</div>
</body>
</html>