How it works
A diamond is a pyramid with its mirror image underneath: rows grow to the widest one in the middle, then shrink again. Every row is centred, so each one starts a whole number of columns in from the edge. Because each item spans two columns, rows whose sizes differ by one sit half an item apart.
The generator keeps the shape symmetric for any number of items. It adds the leftover items to the middle row first, then in pairs. The opposite shape, wide at the top and bottom, is the hourglass in the shape picker.
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>
.diamond-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.75rem;
justify-items: center;
}
.diamond-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 */
.diamond-grid > :nth-child(1) { grid-column: 3 / span 2; }
.diamond-grid > :nth-child(2) { grid-column: 2 / span 2; }
.diamond-grid > :nth-child(4) { grid-column: 1 / span 2; }
.diamond-grid > :nth-child(7) { grid-column: 2 / span 2; }
.diamond-grid > :nth-child(9) { grid-column: 3 / span 2; }
</style>
<div class="diamond-grid">
<div class="diamond-item">1</div>
<div class="diamond-item">2</div>
<div class="diamond-item">3</div>
<div class="diamond-item">4</div>
<div class="diamond-item">5</div>
<div class="diamond-item">6</div>
<div class="diamond-item">7</div>
<div class="diamond-item">8</div>
<div class="diamond-item">9</div>
</div>