Grid

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { Card, Grid, GridItem } from '@optimus-web/core';
                                                        
                                                        <Stack gap="200" templateColumns="1fr 1fr 1fr" alignItems="center" justifyItems="center" alignContent="stretch" justifyContent="center">
                                                            <GridItem>
                                                                <Card />
                                                            </GridItem>
                                                            <GridItem justifySelf="start" alignSelf="start">
                                                                <Card />
                                                            </GridItem>
                                                            <GridItem>
                                                                <Card />
                                                            </GridItem>
                                                        </Stack>
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

Grid

Name

Description

Type

Default

inline?

Defines if the grid should be inline

boolean

undefined

autoFlow?

Controls how the auto-placement algorithm works

AutoFlowVariant

undefined

autoColumns?

Specifies the size of any auto-generated grid tracks

string

undefined

autoRows?

Specifies the size of any auto-generated grid tracks

string

undefined

columnGap?

Specifies the size of the grid lines

SpacingToken

undefined

rowGap?

Specifies the size of the grid lines

SpacingToken

undefined

divider?

Specfies the divider between grid items

DividerVariant

undefined

height?

Specifies the height of the grid

string

undefined

gap?

A shorthand for row-gap and column-gap

SpacingToken

undefined

templateAreas?

Defines a grid template by referencing the names of the grid areas

string

undefined

templateColumns?

Defines the columns of the grid with a space-separated list of values

string

undefined

templateRows?

Defines the rows of the grid with a space-separated list of values

string

undefined

printTemplateAreas?

Defines a grid template by referencing the names of the grid areas for print

string

undefined

printTemplateColumns?

Defines the columns of the grid with a space-separated list of values for print

string

undefined

printTemplateRows?

Defines the rows of the grid with a space-separated list of values for print

string

undefined

alignItems?

Aligns grid items along the block (column) axis

ItemPlacementVariant

undefined

justifyItems?

Aligns grid items along the inline (row) axis

ItemPlacementVariant

undefined

alignContent?

Aligns the grid along the block (column) axis

ContentPlacementVariant

undefined

justifyContent?

Aligns the grid along the inline (row) axis

ContentPlacementVariant

undefined

ResponsiveIntervals

For templateAreas, templateColumns, and templateRows. See responsive documentation

 

 

GridItem

Name

Description

Type

Default

area?

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property

string

undefined

column?

Shorthand for grid-column-start + grid-column-end

string

undefined

row?

Shorthand for grid-row-start + grid-row-end

string

undefined

columnStart?

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start is the line where the item begins

string

undefined

columnEnd?

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-end is the line where the item ends

string

undefined

rowStart?

Determines a grid item’s location within the grid by referring to specific grid lines. grid-row-start is the line where the item begins

string

undefined

rowEnd?

Determines a grid item’s location within the grid by referring to specific grid lines. grid-row-end is the line where the item ends

string

undefined

overflow?

Defines if the grid item should overflow

string

undefined

minWidth?

Defines the mid width for the grid item

string

undefined

responsiveItem?

Defines if the GridItem should be responsive

boolean

undefined

justifySelf?

Aligns a grid item inside a cell along the inline (row) axis

ItemPlacementVariant

undefined

alignSelf?

Aligns a grid item inside a cell along the block (column) axis

ItemPlacementVariant

undefined

ResponsiveIntervals

For columnStart, columnEnd, rowStart and rowEnd. See responsive documentation