Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.grid {
display: inline-grid;
vertical-align: top;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 20px 20px 0;
font-family: monospace;
}
.a { background: coral; }
.b { background: steelblue; }
.c { background: seagreen; }
.d { background: goldenrod; }
.e { background: mediumpurple; }
.f { background: tomato; }
.row {
grid-auto-flow: column;
grid-template-rows: 40px 40px 40px;
grid-template-columns: 60px 60px;
}
.col {
grid-template-columns: 40px 40px 40px;
grid-template-rows: 60px 60px;
}
.row > div { width: 60px; height: 30px; }
.col > div { width: 30px; height: 60px; }
</style>
</head>
<body>
<div id="row-stack-scroll" class="grid row" style="overflow-x: auto; overflow-y: clip;">
<div class="d">D</div><div class="e">E</div><div class="f">F</div>
<div class="a">A</div><div class="b">B</div><div class="c">C</div>
</div>
<div id="row-stack-clip" class="grid row" style="overflow-x: clip; overflow-y: auto; justify-content: end;">
<div class="d">D</div><div class="e">E</div><div class="f">F</div>
<div class="a">A</div><div class="b">B</div><div class="c">C</div>
</div>
<div id="col-stack-scroll" class="grid col" style="overflow-y: auto; overflow-x: clip;">
<div class="d">D</div><div class="e">E</div><div class="f">F</div>
<div class="a">A</div><div class="b">B</div><div class="c">C</div>
</div>
<div id="col-stack-clip" class="grid col" style="overflow-y: clip; overflow-x: auto; align-content: end;">
<div class="d">D</div><div class="e">E</div><div class="f">F</div>
<div class="a">A</div><div class="b">B</div><div class="c">C</div>
</div>
<script>
// Scroll the scrollable stacking axes to their end so the plain grid's scroll
// position matches the fill-reverse reversed end origin.
document.getElementById('row-stack-scroll').scrollLeft = 1000000;
document.getElementById('col-stack-scroll').scrollTop = 1000000;
</script>
</body>
</html>