Your Business Name
Skip to main content

CardGrid - Organize Content Beautifully

Responsive grid layout for organizing any card components. Set columns (1-4) and let it handle breakpoints automatically.

See ExamplesAll UI Components

What Is CardGrid?

CardGrid is your go-to layout component for displaying multiple cards. Set the column count (1-4) and it handles all responsive breakpoints automatically. Works with any card component: IconCard, TeamCard, TestimonialCard, etc.

Live Examples

4-Column Grid

Maximum density for feature highlights and icon grids

Mobile

Responsive design

Desktop

Full-width layout

Web

Browser-compatible

Fast

Optimized performance

How to Use CardGrid

Basic Usage

---
import CardGrid from '@theme/components/ui/CardGrid.astro';
import IconCard from '@theme/components/ui/IconCard.astro';
---

<CardGrid columns={3}>
  <IconCard
    icon="🎯"
    title="Feature One"
    description="Your feature description"
    href="/feature-one/"
    ctaText="Learn more"
  />
  <IconCard
    icon="🚀"
    title="Feature Two"
    description="Your feature description"
    href="/feature-two/"
    ctaText="Learn more"
  />
  <IconCard
    icon="💡"
    title="Feature Three"
    description="Your feature description"
    href="/feature-three/"
    ctaText="Learn more"
  />
</CardGrid>

With Different Card Types 

import CardGrid from '@theme/components/ui/CardGrid.astro';
import TeamCard from '@theme/components/ui/TeamCard.astro';

<CardGrid columns={3}>
  <TeamCard
    name="John Doe"
    role="CEO"
    image="/images/team/john.jpg"
    bio="Company founder"
  />
  <TeamCard
    name="Jane Smith"
    role="CTO"
    image="/images/team/jane.jpg"
    bio="Tech lead"
  />
  <TeamCard
    name="Bob Wilson"
    role="Designer"
    image="/images/team/bob.jpg"
    bio="UI/UX expert"
  />
</CardGrid>

Props Reference

  • columns - Number of columns (1, 2, 3, or 4). Default: 3
  • Responsive breakpoints handled automatically
  • Works with any card component as children
  • Proper gap spacing between cards

CardGrid Features

Fully Responsive

Adapts from 1 to 4 columns based on screen size

Theme Aware

Works with light and dark modes automatically

Accessible

Semantic HTML with proper spacing

Zero JS

Pure CSS grid, no JavaScript required

Ready to Use CardGrid?

Drop it into your pages and start organizing content in responsive grids.

All UI Components Back to Components