How it works
A staircase is a pyramid whose rows line up on one side instead of the centre. Each row starts at the first column (or ends at the last), so the "steps" form on the opposite edge. This example uses year labels as a simple timeline.
Each row can have its own alignment: use the L / C / R buttons on a row in the preview. Watch for one case:
when a row starts after the end of the row above (a short left row followed by a short right row),
auto-placement can't break the line by itself. Compact mode then gives those items an explicit
grid-area, and the tool tells you when that happens.
The code
This is the HTML + CSS the generator above produces for this layout (Compact mode). Change the items, the rows or the class name and copy your own version. Named areas and row wrappers are one click away.
<style>
.steps-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 0.75rem;
justify-items: center;
}
.steps-item {
grid-column: span 2;
box-sizing: border-box;
width: 100%;
min-height: 3rem;
border-radius: 0.75rem;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #22c55e;
color: #022c22;
font-weight: 600;
font-size: 0.85rem;
}
/* Where each row starts; the other items flow after it */
.steps-grid > :nth-child(2) { grid-column: 1 / span 2; }
.steps-grid > :nth-child(4) { grid-column: 1 / span 2; }
.steps-grid > :nth-child(7) { grid-column: 1 / span 2; }
</style>
<div class="steps-grid">
<div class="steps-item">2016</div>
<div class="steps-item">2017</div>
<div class="steps-item">2018</div>
<div class="steps-item">2019</div>
<div class="steps-item">2020</div>
<div class="steps-item">2021</div>
<div class="steps-item">2022</div>
<div class="steps-item">2023</div>
<div class="steps-item">2024</div>
<div class="steps-item">2025</div>
</div>