Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<head>
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
.wrapper {
display: inline-block;
width: 110px;
border: 1px solid;
}
.grid {
display: grid;
grid-auto-rows: 8px;
background: grey;
}
.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }
.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }
.fill-0c { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) }
.fill-0d { grid-template-columns: subgrid repeat(auto-fill, [x]) }
.fill-0e { grid-template-columns: subgrid [x] }
.grid > :nth-child(2n) { background: black; }
.grid > :nth-child(2n+1) { background: pink; }
</style>
</head>
<body>
<div class="wrapper"><div class="grid fill-0a">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0b">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0c">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0d">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0e">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<script>
const expectedResults = [
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
];
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
let actual = window.getComputedStyle(grid)['grid-template-columns'];
let expected = expectedResults[i];
if (actual != expected) {
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
document.body.appendChild(document.createTextNode(err));
document.body.appendChild(document.createElement("br"));
}
});
</script>
</body>