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/subgrid/subgrid-baseline-015.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Test: last-baseline alignment with a direct item inside a nested subgrid keeps items in place</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
body { margin: 0; padding: 0; font: 15px/1 Ahem; }
.grid {
display: inline-grid;
position: relative;
border: 2px solid black;
grid-template-columns: repeat(4, auto);
grid-template-rows:
[top-start] min-content
[top-end middle-start] min-content
[middle-end bottom-start] min-content
[bottom-end];
}
.subgrid {
align-items: last baseline;
display: grid;
border: 2px solid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
grid-row: middle;
grid-template-rows:
[top-start] min-content
[top-end middle-start] min-content
[middle-end bottom-start] min-content
[bottom-end];
}
.subgrid.outer { border-color: green; }
.subgrid.inner { border-color: purple; }
.direct {
grid-column: 1 / -1;
grid-row: top;
}
.inner-grid {
display: grid;
border: 2px solid gray;
grid-template-columns: subgrid;
grid-column: 1 / -1;
grid-row: middle;
grid-template-rows: minmax(2rem, auto) auto;
}
.inner-subgrid {
display: grid;
width: 40px;
background: lightblue;
grid-template-rows: subgrid;
grid-row: 1 / -1;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.item')">
<div class="grid">
<div class="subgrid outer">
<div class="subgrid inner">
<div class="direct item" data-offset-x="4" data-offset-y="4">D</div>
<div class="inner-grid">
<div class="inner-subgrid item" data-offset-x="6" data-offset-y="21">1</div>
<div class="inner-subgrid item" data-offset-x="46" data-offset-y="21">2</div>
<div class="inner-subgrid item" data-offset-x="86" data-offset-y="21">3</div>
<div class="inner-subgrid item" data-offset-x="126" data-offset-y="21">4</div>
</div>
</div>
</div>
</div>
</body>