logo
ComponentsColumns
Components

Columns

Reference for creating responsive grid layouts using the Columns component.

Overview

Create responsive multi-column layouts that automatically adapt to different screen sizes. Use Columns to organize cards, content blocks, or any components in a grid structure.

Common use cases:

  • Card grids for features or navigation
  • Multi-column content layouts
  • Image galleries
  • Comparison tables or side-by-side content
  • Resource links or quick actions

Responsive

Automatically adapts to mobile, tablet, and desktop screens.

Flexible

Support for 2, 3, or 4 column layouts.

Consistent

Maintains consistent spacing between items.

Basic syntax

Wrap any components in <Columns> to create a grid layout:

<Columns cols={2}>
  <Card title="First Item" icon="circle" href="#">
    Content for the first column.
  </Card>
  <Card title="Second Item" icon="square" href="#">
    Content for the second column.
  </Card>
</Columns>

First Item

Content for the first column.

Second Item

Content for the second column.

Column configurations

Two columns

Perfect for side-by-side comparisons or paired content:

<Columns cols={2}>
  <Card title="Before" icon="circle-x" href="#">
    Original implementation with manual configuration.
  </Card>
  <Card title="After" icon="check-circle" href="#">
    Simplified approach using our automated tools.
  </Card>
</Columns>

Before

Original implementation with manual configuration.

After

Simplified approach using our automated tools.

Three columns

Ideal for feature showcases or grouped information:

<Columns cols={3}>
  <Card title="Fast" icon="zap" href="#">
    Optimized for performance and speed.
  </Card>
  <Card title="Secure" icon="shield" href="#">
    Built with security best practices.
  </Card>
  <Card title="Scalable" icon="trending-up" href="#">
    Grows with your application needs.
  </Card>
</Columns>

Fast

Optimized for performance and speed.

Secure

Built with security best practices.

Scalable

Grows with your application needs.

Four columns

Great for extensive feature lists or navigation grids:

<Columns cols={4}>
  <Card title="Docs" icon="book-open" href="#">
    Read the documentation.
  </Card>
  <Card title="API" icon="code" href="#">
    Explore the API reference.
  </Card>
  <Card title="Support" icon="help-circle" href="#">
    Get help from our team.
  </Card>
  <Card title="Community" icon="users" href="#">
    Join the community.
  </Card>
</Columns>

Docs

Read the documentation.

API

Explore the API reference.

Support

Get help from our team.

Community

Join the community.

Use horizontal cards with 4 columns for better content fit on desktop screens.

Responsive behavior

Columns automatically adapt to different screen sizes:

Screen Sizecols=2cols=3cols=4
Mobile1 column1 column1 column
Tablet2 columns2 columns2 columns
Desktop2 columns3 columns4 columns

All column layouts stack to single column on mobile devices for optimal readability.

Mixed content

Columns works with any content, not just Card components:

<Columns cols={2}>
  <div>
    ### First Section
    Regular markdown content in the first column.
  </div>
  
  <div>
    ### Second Section
    More content in the second column with **formatting**.
  </div>
</Columns>

With images

<Columns cols={3}>
  <Image src="/image1.jpg" alt="First" width="300" height="200" />
  <Image src="/image2.jpg" alt="Second" width="300" height="200" />
  <Image src="/image3.jpg" alt="Third" width="300" height="200" />
</Columns>

With callouts

<Columns cols={2}>
  <Callout kind="info">
    This is an informational callout in the first column.
  </Callout>
  <Callout kind="tip">
    This is a tip callout in the second column.
  </Callout>
</Columns>

This is an informational callout in the first column.

This is a tip callout in the second column.

Uneven items

Columns handles uneven numbers of items gracefully:

<Columns cols={3}>
  <Card title="Item 1" icon="circle" href="#">First item</Card>
  <Card title="Item 2" icon="circle" href="#">Second item</Card>
  <Card title="Item 3" icon="circle" href="#">Third item</Card>
  <Card title="Item 4" icon="circle" href="#">Fourth item</Card>
  <Card title="Item 5" icon="circle" href="#">Fifth item</Card>
</Columns>

Item 1

First item

Item 2

Second item

Item 3

Third item

Item 4

Fourth item

Item 5

Fifth item

Extra items wrap to the next row while maintaining the grid structure.

Attributes

colsnumber

Number of columns: 1, 2, 3, or 4. Defaults to 1 if not specified.

Common patterns

  • Feature grids - 2-3 columns for showcasing product features with cards
  • Navigation sections - 2-4 columns for documentation navigation
  • Resource links - 3-4 columns for external resources or tools
  • Comparison layouts - 2 columns for before/after or option comparisons
  • Image galleries - 3-4 columns for visual content organization
  • Quick actions - 2-3 columns for common tasks or shortcuts
  • Team members - 3-4 columns for team or author profiles
  • Integration showcase - 4 columns for logos or integration cards

Avoid using more than 3 columns for content-heavy items. Use horizontal cards or reduce column count for better readability.

Best practices

Column selection:

  • 2 columns - Detailed content, comparisons, or lengthy descriptions
  • 3 columns - Standard feature showcases, most versatile option
  • 4 columns - Compact navigation, icon grids, or simple cards

Content guidelines:

  • Keep card descriptions similar in length for visual balance
  • Use consistent icons and styling across all items
  • Limit text for 4 column layouts
  • Test on mobile to ensure readability

Accessibility:

  • Columns maintain reading order (left to right, top to bottom)
  • All content remains accessible when stacked on mobile
  • Use semantic HTML within column content for screen readers
Powered by Documentation.AI