Columns
Columns places content side by side in a responsive grid that stacks on mobile and expands on desktop, with configurable column counts from one to four.
Columns places content side by side in a responsive grid. The grid stacks on mobile and expands on desktop.
Put Cards, Tiles, images, or custom components inside it.
Basic Usage
Display content in two columns (default):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=mvln4sya" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=mvln4sya" alt="Tabs preview" />
</Tile>
</Columns>More Columns
Use cols={3} or cols={4} for denser layouts:
<Columns cols={3}>
...
</Columns>Choosing Column Count
| Content Type | Recommended Columns |
|---|---|
| Tiles with images | 2-3 |
| Text-heavy items | 2 |
| Small metrics/stats | 3-4 |
| Image comparisons | 2 |
Responsive Behavior
Column count changes with screen width:
- Mobile (< 768px): 1 column
- Tablet (768px - 1024px): 2 columns max
- Desktop (> 1024px): Full column count
Props
Number of columns per row. Accepts values from 1 to 4.