How it works
A pyramid is a stack of centred rows, each one item wider than the one above. With two grid columns per item, centring a row is simple arithmetic. In a grid made for a widest row of 4 (8 columns), a row of 3 starts at column 2, a row of 2 at column 3 and the top item at column 4.
When the number of items doesn't make a perfect pyramid (11 items, say), the generator gives the closest shape and puts the extra items in the widest rows. Flip it to an inverted pyramid in the shape picker, or edit the row sizes directly.
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>
.pyramid-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 0.75rem;
justify-items: center;
}
.pyramid-item {
grid-column: span 2;
width: 3rem;
height: 3rem;
border-radius: 999px;
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 */
.pyramid-grid > :nth-child(1) { grid-column: 4 / span 2; }
.pyramid-grid > :nth-child(2) { grid-column: 3 / span 2; }
.pyramid-grid > :nth-child(4) { grid-column: 2 / span 2; }
.pyramid-grid > :nth-child(7) { grid-column: 1 / span 2; }
</style>
<div class="pyramid-grid">
<div class="pyramid-item">1</div>
<div class="pyramid-item">2</div>
<div class="pyramid-item">3</div>
<div class="pyramid-item">4</div>
<div class="pyramid-item">5</div>
<div class="pyramid-item">6</div>
<div class="pyramid-item">7</div>
<div class="pyramid-item">8</div>
<div class="pyramid-item">9</div>
<div class="pyramid-item">10</div>
</div>