15 CSS Card Grid Layouts12 / 15

Pure CSSMIT licensed

CSS Team Directory Face Grid

A centered profile-card directory where each circular avatar breaks the top edge of its card using a negative margin pulled over a card with extra top padding to make room.

Published

Live Demo
Try it

The code

<div class="cg-05">
  <div class="cg-05__grid">
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#fbbf24,#f97316)"></div>
      <h3 class="cg-05__name">Dana Whitfield</h3>
      <p class="cg-05__role">Head of Product Design</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#34d399,#0ea5e9)"></div>
      <h3 class="cg-05__name">Idris Bello</h3>
      <p class="cg-05__role">Staff Engineer</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#f472b6,#a855f7)"></div>
      <h3 class="cg-05__name">Lena Ferraro</h3>
      <p class="cg-05__role">VP of Customer Success</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
  </div>
</div>
.cg-05,
.cg-05 *,
.cg-05 *::before,
.cg-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cg-05 ::selection {
  background: #a855f7;
  color: #fff;
}

.cg-05 {
  --muted: #6b7280;
  background: #f3f1ee;
  min-height: 100vh;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding: 64px 24px 48px;
}

.cg-05__grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 24px;
  row-gap: 56px;
}

.cg-05__card {
  position: relative;
  background: #fff;
  border: 1px solid #e7e4dd;
  border-radius: 16px;
  padding: 56px 20px 24px;
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}

.cg-05__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(31,41,55,.25);
}

.cg-05__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: -50px auto 12px;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.cg-05__name {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.cg-05__role {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 4px;
}

.cg-05__social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cg-05__social span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ee;
  color: #374151;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}

.cg-05__social span:hover {
  background: #1f2937;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cg-05__card,
    .cg-05__social span {
    transition: none;
  }

  .cg-05__card:hover {
    transform: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Card Grid Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Team Directory Face Grid
Source: https://codefronts.com/layouts/css-card-grid-layout/css-team-directory-face-grid/

A centered profile-card directory where each circular avatar breaks the top edge of its card using a negative margin pulled over a card with extra top padding to make room.
## HTML
```html
<div class="cg-05">
  <div class="cg-05__grid">
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#fbbf24,#f97316)"></div>
      <h3 class="cg-05__name">Dana Whitfield</h3>
      <p class="cg-05__role">Head of Product Design</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#34d399,#0ea5e9)"></div>
      <h3 class="cg-05__name">Idris Bello</h3>
      <p class="cg-05__role">Staff Engineer</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
    <article class="cg-05__card">
      <div class="cg-05__avatar" style="background:linear-gradient(135deg,#f472b6,#a855f7)"></div>
      <h3 class="cg-05__name">Lena Ferraro</h3>
      <p class="cg-05__role">VP of Customer Success</p>
      <div class="cg-05__social"><span>in</span><span>tw</span><span>gh</span></div>
    </article>
  </div>
</div>
```
## CSS
```css
.cg-05,
.cg-05 *,
.cg-05 *::before,
.cg-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cg-05 ::selection {
  background: #a855f7;
  color: #fff;
}

.cg-05 {
  --muted: #6b7280;
  background: #f3f1ee;
  min-height: 100vh;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding: 64px 24px 48px;
}

.cg-05__grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 24px;
  row-gap: 56px;
}

.cg-05__card {
  position: relative;
  background: #fff;
  border: 1px solid #e7e4dd;
  border-radius: 16px;
  padding: 56px 20px 24px;
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}

.cg-05__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(31,41,55,.25);
}

.cg-05__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: -50px auto 12px;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.cg-05__name {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.cg-05__role {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 4px;
}

.cg-05__social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cg-05__social span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ee;
  color: #374151;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}

.cg-05__social span:hover {
  background: #1f2937;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cg-05__card,
    .cg-05__social span {
    transition: none;
  }

  .cg-05__card:hover {
    transform: none;
  }
}
```

How this works

Each card is position:relative with generous padding-top reserving space above the text. The avatar wrapper is centered with margin: -50px auto 12px — a negative top margin equal to half its own height — which pulls the circle upward so it visually overlaps and breaks the card's top border, sitting half inside and half outside.

The card itself stays a plain block (no special grid needed there); the outer directory wrapper is the actual grid: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) with generous row gap so the protruding avatars never collide with the row above. Social icons sit in a flex row pinned to the card bottom with justify-content:center.

Make it yours

  • Resize the avatar by editing both the width/height on .cg-05__avatar and the matching negative margin-top together — they must stay in sync at exactly half the diameter.
  • Swap the flat avatar ring for a gradient ring by adding a padding:3px wrapper with a gradient background behind the avatar image.
  • Adjust card spacing via row-gap on .cg-05__grid if avatars feel cramped against the row above once you increase avatar size.
  • Replace the muted job-title colour using --muted at the .cg-05 root to match your brand's secondary text tone.
  • Add a verified badge by absolutely positioning a small icon at the avatar's bottom-right corner with position:absolute; inset:auto -2px 2px auto.

Gotchas — read before shipping

  • The negative-margin overlap technique requires the card's padding-top to be at least the avatar radius plus desired exposed amount, or the avatar will be clipped by overflow:hidden if the card uses it elsewhere for image corners.
  • If the directory grid's row-gap is too small, a tall card's protruding avatar can visually collide with the bottom of the card directly above it on wrap.
  • Centering the avatar with margin:auto only works because the wrapper is a block-level element with an explicit width; switching the avatar to display:inline silently breaks the centering.

Browser support

ChromeSafariFirefoxEdge
4+4+4+4+

Negative margins and auto-fit grids are long-standing, universally supported CSS — no known compatibility caveats.

Techniques used in this demo

grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →