Columns

Columns create responsive grid layouts for displaying content elements side by side. The grid automatically adapts to smaller screens.

For Card layouts, use CardGroup instead. Columns is designed for non-Card content like Tiles or custom components.

Basic usage

Display content in two columns (default):

Accordion

Collapsible content

Tabs

Tabbed content

<Columns>
  <Tile href="/components/accordion" title="Accordion" description="Collapsible content">
    <img src="/images/hero.png" alt="Accordion preview" />
  </Tile>
  <Tile href="/components/tabs" title="Tabs" description="Tabbed content">
    <img src="/images/hero.png" alt="Tabs preview" />
  </Tile>
</Columns>

Three columns

Accordion

Collapsible

Tabs

Tabbed content

Steps

Procedures

<Columns cols={3}>
  <Tile href="/components/accordion" title="Accordion" description="Collapsible">
    <img src="/images/hero.png" alt="Accordion" />
  </Tile>
  <Tile href="/components/tabs" title="Tabs" description="Tabbed content">
    <img src="/images/hero.png" alt="Tabs" />
  </Tile>
  <Tile href="/components/steps" title="Steps" description="Procedures">
    <img src="/images/hero.png" alt="Steps" />
  </Tile>
</Columns>

Four columns

Item 1

Item 2

Item 3

Item 4

<Columns cols={4}>
  <div className="p-4 border rounded-lg">Item 1</div>
  <div className="p-4 border rounded-lg">Item 2</div>
  <div className="p-4 border rounded-lg">Item 3</div>
  <div className="p-4 border rounded-lg">Item 4</div>
</Columns>

Responsive behavior

Columns automatically adapt to screen size:

Mobile (< 768px): 1 column
Tablet (768px - 1024px): 2 columns max
Desktop (> 1024px): Full column count

Properties

numberdefault: 2

Number of columns per row. Accepts values from 1 to 4.