Responsive List of Avatars Using Modern CSS (Part 1)

Responsive List of Avatars Using Modern CSS

A list of rounded images that slightly overlap each other is a classic web design pattern. The novelty lies in the responsive implementation, dynamically adjusting the overlap between images to fit the container.

Achieving a responsive layout with overlapping elements presents a challenge to traditional web development. Ideal models assume predictable element sizes, but real-world scenarios demand flexibility to accommodate varying screen sizes and content lengths, which can easily lead to layout breaks and visual inconsistencies if not handled correctly.

Key Insights

• sibling-count() Support: Currently limited to Chrome and Safari Technology Preview (as of Dec 2025), with Firefox support tracked in Ticket #1953973 and WebKit in Issue #471.
• CSS Masking: Utilizing mask: radial-gradient() to create transparent gaps between images, enhancing visual appeal and complexity.
• Container Queries: Employing container-type: inline-size and 100cqi units to accurately calculate responsive margins based on container dimensions, avoiding percentage-based inaccuracies.

Working Example

.container {
  --s: 120px; /* image size*/
  --g: 10px; /* the gap */
  display: flex;
  container-type: inline-size;
}

.container img {
  width: var(--s);
  border-radius: 50%;
  --_m: min((100cqw - sibling-count() * var(--s))/(sibling-count() - 1), var(--g));
  margin-right: var(--_m);
  mask: radial-gradient(50% 50% at calc(150% + var(--_m)),
    #0000 calc(100% + var(--g)), #000);
  transition: --_m .3s linear;
}

@property --_m {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px
}

.container:not(.reverse) img:last-child {
  mask: none;
  margin: 0;
}

.container:not(.reverse):has(:not(:last-child):hover) img:not(:hover) {
  --_m: min((100cqw - var(--g) - sibling-count()*var(--s))/(sibling-count() - 2),var(--g));
}

Practical Applications

• Profile Galleries: Social media platforms or team directories could use this pattern to display user avatars in a visually engaging and responsive manner.
• Pitfall: Over-reliance on pixel-based margins can lead to layout issues on different screen densities. Using relative units like cqw and cqi is crucial for consistent rendering.

References:

• https://css-tricks.com/responsive-list-of-avatars-using-modern-css-part-1/