Card Grid

Responsive grid layout for any card component. Renders children in 2 or 3 columns.

API Reference

Prop	Type	Default
columns	2 \| 3	3
children	ReactNode	—

3 Columns

Design

Mar 15, 2026

Getting Started with Design Tokens

Learn how semantic color tokens make your design system scalable.

Engineering

Mar 8, 2026

Building Accessible Components

Practical tips for keyboard navigation and focus management.

Design

Feb 28, 2026

Dark Mode Done Right

Why flipping CSS custom properties beats two stylesheets.

2 Columns

Residential2024

Mountain Retreat

A modern cabin nestled in the Cascades.

Bend, OR

Residential2023

Coastal House

Beachfront residence with floor-to-ceiling windows.

Santa Cruz, CA

Usage

import { CardGrid } from "@/components";
import { BlogCard } from "@/extensions/features/blog";

<CardGrid>
  {posts.map((post) => (
    <BlogCard key={post.title} {...post} />
  ))}
</CardGrid>

<CardGrid columns={2}>
  {posts.slice(0, 2).map((post) => (
    <BlogCard key={post.title} {...post} />
  ))}
</CardGrid>

Basic Usage

import { CardGrid } from "@/components";

<CardGrid>
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</CardGrid>

Source

src/components/CardGrid.tsx

interface CardGridProps {
  columns?: 2 | 3;
  children: React.ReactNode;
}

export function CardGrid({ columns = 3, children }: CardGridProps) {
  return (
    <div
      className={
        columns === 2
          ? "grid gap-6 sm:grid-cols-2"
          : "grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
      }
    >
      {children}
    </div>
  );
}