ShapedGrid

Team page grid layout

Round avatars in a shape instead of a plain grid. Add your people, adjust the rows and copy the code. How it works ↓

☕ Support

Preview 0 items

Code

Area names

How it works

Add one person per line, as a photo URL or file name followed by | Their name. The name becomes the image's alt text and the grid area name, so the layout stays accessible and readable. Cover crops each photo to fill its circle.

An inverted pyramid puts more people at the top. A diamond or honeycomb suits a small team. Below 600px the example switches to rows of three and two. To show a name under each photo, put a <figure> with a <figcaption> inside each item after you copy the code; the grid doesn't change.

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>
.team-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1.25rem;
  justify-items: center;
}

.team-item {
  grid-column: span 2;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.85rem;
}

.team-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 600px) {
  /* Where each row starts; the other items flow after it */
  .team-grid > :nth-child(5) { grid-column: 2 / span 2; }
  .team-grid > :nth-child(8) { grid-column: 3 / span 2; }
  .team-grid > :nth-child(10) { grid-column: 4 / span 2; }
}

@media (max-width: 599.98px) {
  .team-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .team-grid > :nth-child(7) { grid-column: 2 / span 2; }
  .team-grid > :nth-child(9) { grid-column: 2 / span 2; }
}
</style>

<div class="team-grid">
  <div class="team-item"><img src="avatar-1.jpg" alt="Alex Kim"></div>
  <div class="team-item"><img src="avatar-2.jpg" alt="Maria Lopez"></div>
  <div class="team-item"><img src="avatar-3.jpg" alt="Sam Patel"></div>
  <div class="team-item"><img src="avatar-4.jpg" alt="Lea Müller"></div>
  <div class="team-item"><img src="avatar-5.jpg" alt="Tom Becker"></div>
  <div class="team-item"><img src="avatar-6.jpg" alt="Nina Rossi"></div>
  <div class="team-item"><img src="avatar-7.jpg" alt="Omar Haddad"></div>
  <div class="team-item"><img src="avatar-8.jpg" alt="Chloe Martin"></div>
  <div class="team-item"><img src="avatar-9.jpg" alt="Jonas Berg"></div>
  <div class="team-item"><img src="avatar-10.jpg" alt="Aiko Tanaka"></div>
</div>

More shapes