Content Grid
A flexible grid/list component that provides seamless switching between grid and list layouts with customizable card rendering.
Installation
Install the Content Grid component using your preferred package manager.
Usage
The Content Grid component provides a flexible layout system for displaying collections of items. It supports both grid and list views with smooth transitions and gives you complete control over how each item is rendered.
3 items
A comprehensive dashboard template with charts and analytics.
Complete UI kit with modern components and layouts.
Premium icon collection with 500+ icons.
Discover Its Features
The Content Grid component is packed with powerful features designed to provide an exceptional user experience.
Grid & List Views
Seamlessly switch between grid and list layouts with smooth transitions and optimized rendering.
Flexible Rendering
Complete control over card rendering with custom render functions that adapt to view modes.
Responsive Design
Built-in responsive breakpoints ensure optimal display across all device sizes.
Customizable Columns
Configure exact column counts or use auto-responsive layouts that adapt to screen size.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ContentItem[] | [] | Array of items to display in the grid/list |
| renderCard | (item: ContentItem, viewMode: ViewMode) => React.ReactNode | undefined | Function to render each card item. Receives the item and current view mode. |
| defaultViewMode | 'grid' | 'list' | 'grid' | Default view mode when component loads |
| gridColumns | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | Number of columns in grid view. "auto" provides responsive columns. |
| className | string | '' | Additional CSS classes for the container |
| onViewModeChange | (mode: ViewMode) => void | undefined | Callback function called when view mode changes |