→ Anonymous
→ User Avatars Grid Layout

User Avatars Grid Layout

A responsive grid layout for displaying user avatars that adapts beautifully to any screen size, perfect for team pages or user directories.

This Example is contributed by Anonymous, on 12-Mar-2025. It is responsive. similar terms for this example are User Avatars,Grid Display,CSS Grid,Grid,Card Grid

Avatar Team Grid Layout Profile

Author Anonymous

Fork Fullscreen

<div class="avatars-container">
  <div class="avatar-grid">
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Sarah Johnson</h3>
        <p>Product Designer</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Michael Chen</h3>
        <p>Frontend Developer</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Amanda Lewis</h3>
        <p>UX Researcher</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>David Wilson</h3>
        <p>Backend Developer</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Elena Rodriguez</h3>
        <p>Project Manager</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>James Thompson</h3>
        <p>Data Scientist</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Sophia Ahmed</h3>
        <p>Marketing Specialist</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Robert Garcia</h3>
        <p>DevOps Engineer</p>
      </div>
    </div>
    <div class="avatar-item">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
      </div>
      <div class="user-info">
        <h3>Lisa Kim</h3>
        <p>Content Strategist</p>
      </div>
    </div>
  </div>
</div>

Related Examples

User Avatar Card
A responsive user avatar card featuring online status indicator, follow button, and dark mode support with smooth transitions for modern web applications.

Author:
Alexandra Sinclair

1 month ago
Team Members Grid

Author:
Mert Yılmaz

1 month ago
Responsive Feature Grid Cards for Modern Websites
Showcase your product's key features with these responsive grid layout cards. Perfect for highlighting services, benefits, or product specifications on landing pages.

Author:
Morgan

2 months ago
Feature Card Grid Layout
A clean, responsive grid layout showcasing product or service features with icon illustrations and descriptive text.

Author:
MD. Tayyub

1 month ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 months ago
Team Profile Card

Author:
Anonymous

1 month ago
Team Section with Responsive Profile Cards
A responsive team section featuring profile cards with team member photos, names, roles, and social media links.

Author:
Aiden Mercer

1 month ago
Modern Flexible User Profile Card
A clean and flexible user profile card with avatar, user information, and social stats designed with a modern aesthetic and responsive layout.

Author:
Anonymous

1 month ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

1 month ago
Dynamic Testimonial Cards with User Ratings

Author:
Anonymous

1 month ago
Team Showcase Grid with Hover Effects

Author:
Alex Morgan

1 month ago
Author Profile Card with Social Media Links

Author:
Elara

2 months ago

Didn't find component you were looking for?

Search from 500+ components