Example
Card 1
This is a sample card to demonstrate grid layouts.
Loading...
Loading...
The ContentGrid component provides automatic responsive wrapping using CSS Grid auto-fit/auto-fill. Columns automatically adjust and wrap based on available space and min/max column sizes.
Cards automatically adjust and wrap based on available space. Minimum column width of 280px.
For featured content with larger cards, increase the minimum column width.
Smaller cards for more items per row on larger screens.
Limit maximum column width for consistent card sizes even on very large screens.
Auto-fill creates as many columns as fit, even if they're empty, useful for maintaining consistent spacing.
import { ContentGrid } from '@/components/composite/ContentGrid';
import { ContentCard } from '@/components/composite/ContentCard';
// Default: 280px min, auto-fit
<ContentGrid>
{items.map(item => <ContentCard key={item.id} {...item} />)}
</ContentGrid>
// Wider cards for featured content
<ContentGrid minColumnWidth="400px" maxColumnWidth="600px">
{featuredItems.map(item => <ContentCard key={item.id} {...item} variant="featured" />)}
</ContentGrid>
// Compact grid
<ContentGrid minColumnWidth="240px">
{items.map(item => <ContentCard key={item.id} {...item} />)}
</ContentGrid>
// Auto-fill template
<ContentGrid minColumnWidth="280px" template="auto-fill">
{items.map(item => <ContentCard key={item.id} {...item} />)}
</ContentGrid>