GridList
A flexible grid layout component for displaying items in a responsive grid with configurable columns, gaps, and number counters
Overview
The GridList component provides a responsive grid layout system that displays items in a flexible grid format. It supports configurable number of columns, responsive breakpoints for switching between single and multi-column layouts, and flexible gap spacing options. The component is ideal for displaying lists of content items, cards, or any structured content that benefits from a grid layout.
Use the GridList component when you need to:
- Display a list of items in a grid format
- Create responsive layouts that adapt from single-column to multi-column based on screen size
- Control spacing between grid items with fixed or responsive gap values
- Add numbered counters to grid items with customizable styling
The GridList component requires child elements to be React elements. Each child element represents one item in the grid.
Examples
Basic Usage
The most basic usage of GridList displays items in a single column. By default, the grid uses a single column layout. You can configure it to switch to multiple columns at specific breakpoints.
Column Configurations
The numberOfColumns prop determines how many columns the grid will display when the breakpoint is reached. Currently, only 2 columns are supported. The switchToMultiColumn prop controls at which breakpoint the layout switches from single-column to multi-column.
Two Columns
Gap Types
The GridList component supports two types of gap spacing: responsive and fixed. Use gapType to choose between them.
Responsive Gap
Responsive gaps automatically adjust spacing based on screen size (mobile, tablet, desktop). Use gapResponsive to select from predefined responsive spacing values (xs, sm, md, lg, xl).
Fixed Gap
Fixed gaps use consistent spacing values that don't change based on screen size. Use gapFixed to select from fixed spacing values.
Number Counter
The GridList component supports numbered counters for each grid item. When hasNumber is true, you can style the number counter using the numberCounterStyling prop. Currently, only "circle" styling is supported.
When using number counters, you'll need to add the number counter element manually in your child components. The component applies the styling classes, but the actual number display should be implemented in your child content.
Switch to Multi-Column Breakpoints
The switchToMultiColumn prop controls at which breakpoint the layout switches from single-column (stacked) to multi-column. Available breakpoint options range from 2xs (smallest) to 2xl (largest). Choose the breakpoint that best fits your design needs.
Props
Prop
Type
Import
import { GridList } from '@im/integral/components/styled';