ColumnLayout
A flexible layout component for creating responsive multi-column layouts with configurable breakpoints and spacing
Overview
The ColumnLayout component provides a responsive multi-column layout system that automatically adapts to different screen sizes. It supports both fixed and flexible column layouts with configurable breakpoints and spacing. The component uses CSS flexbox to create flexible column layouts that stack on smaller screens and expand into multiple columns on larger screens.
Currently, only 2 columns are supported. Support for additional column counts may be added in the future.
Use the ColumnLayout component when you need to:
- Create responsive multi-column layouts that adapt to screen size
- Display content in a flexible column format that stacks on mobile devices
- Control when columns appear based on breakpoints
- Create equal-width column layouts
The ColumnLayout component requires child elements to be React elements. Each child element represents one column in the layout.
Examples
Basic Usage
The most basic usage of ColumnLayout requires specifying the number of columns, breakpoint for switching to multi-column layout, gap between rows, and layout proportions. The component will stack vertically on smaller screens and switch to the specified number of columns at the configured breakpoint. Currently, only 2 columns are supported. When layout is not specified, it defaults to flexible.
Layout Types
The ColumnLayout component supports two layout types: fixed and flexible. When layout is not specified, it defaults to flexible. The fixed layout uses fixed-width columns (50% each for 2 columns), while flexible allows columns to size based on their content.
Fixed Layout
Flexible Layout
The flexible layout allows columns to size based on their content. By default, columns are centered. You can control the distribution of columns using the className prop with Tailwind utility classes like justify-center or justify-between.
Center (Default)
Space Between
Responsive Breakpoint Configurations
The switchToMultiColumn prop controls at which breakpoint the layout switches from stacked (single column) to multi-column. Available breakpoint options range from breakpoint-2xs (smallest) to breakpoint-2xl (largest). Choose the breakpoint that best fits your design needs. Smaller breakpoints will switch to multi-column layout earlier, while larger breakpoints will keep the stacked layout longer on smaller screens.
The layout defaults to justify-content: center when in multi-column mode. You can override this using the className prop with Tailwind utility classes.
Gap Between Rows Spacing Values
The gapBetweenRows prop controls the vertical spacing between rows in the layout. Available spacing values range from spacing-0 (smallest) to spacing-30 (largest).
Note: The horizontal column gap is automatically set to spacing-6 and increases to spacing-8 at the breakpoint-lg breakpoint and above. This is controlled by the component's internal styles and cannot be customized via props.
Number of Columns
The numberOfColumns prop determines how many columns the layout will display when the breakpoint is reached. Currently, only 2 columns are supported.
Custom className Usage
You can add custom CSS classes to the ColumnLayout component using the className prop. This allows for additional styling or integration with utility classes.
Props
Prop
Type
Import
import { ColumnLayout } from '@im/integral/components/styled';