Grid

Layout based component

info

This component requires Tailwind CSS. Refer to the getting started documentation add styling

Installation

Install

yarn add @iag/chroma-react-ui.components

Import

import { Grid, Column } from '@iag/chroma-react-ui.components';

2 Column Layout

Uses the gap utility class (gap-4) to provide spacing between columns.

https://tailwindcss.com/docs/gap

3 Column Layout

info

For more control over the column widths visit the Column component

Properties

Name

Description

• className
  string
• cols*
  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

CSS Variables