Components

Grid

CSS grid layout component to arrange direct child elements in a tiled grid layout.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

CSS grid layout component to arrange direct child elements in a tiled grid layout.

import { Grid } from 'legion-ui';

Variant

Legion have only one variant of grid

Basic

Box

    <Grid gap={2} columns={2}>
        <Box p={2} bg="primary500" color="white">
            Box
        </Box>
        <Box p={2} bg="success500" color="white">
            Box
        </Box>
        <Box p={2} bg="error500" color="white">
            Box

Props

property	propType	description
columns?	string \| number	Number of (equally-sized) columns, or string with grid syntax for the layout (cannot be used in conjunction with the width prop)
gap?	string \| number	Space between child elements
width?	string \| number	Minimum width of child elements

Do you have feedback?

Please let us know to make it better

Send Feedback