React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { Card, Grid, GridItem } from '@optimus-web/core';
<Grid 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>
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 |
|
|