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/alignment/column-fill-reverse-stacking-alignment-indefinite-size-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: column fill-reverse aligns the entire block of items along the stacking axis with indefinite size</title>
<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
<link rel="match" href="column-fill-reverse-stacking-alignment-indefinite-size-001-ref.html">
<style>
html, body {
font: 16px/1 monospace;
background: white;
}
.grid-lanes {
display: grid-lanes;
grid-lanes-direction: column fill-reverse;
grid-template-columns: repeat(2, 80px);
gap: 4px;
width: 200px;
border: 1px solid;
}
item {
display: block;
width: 40px;
height: 26px;
color: white;
background: #2ca02c;
}
</style>
</head>
<!-- Align-content moves all tracks along the block axis.
When the height of a Grid-Lanes container is undefined, we default to use the stacking axis size (which, in this case, is the block axis).
When we try to align, the content will look like it's not moving at all, since the content fills the entire block size of the container.
-->
<body>
<div class="grid-lanes" style="align-content: start;">
<item>1</item>
<item>2</item>
<item>3</item>
<item>4</item>
</div>
<div class="grid-lanes" style="align-content: center;">
<item>1</item>
<item>2</item>
<item>3</item>
<item>4</item>
</div>
<div class="grid-lanes" style="align-content: end;">
<item>1</item>
<item>2</item>
<item>3</item>
<item>4</item>
</div>
</body>
</html>