Grid
Grid is a utility for displaying multi-column layouts. Arcade is based on a 12 column grid layout.

Usage

To create a simple grid, you can combine the Grid wrapper and a Grid.Column component with a number of columns to define its size.

Content
Content

You don't need to wrap columns with any additional component to display a multiline grid, just add more columns.

Content
Content
Content
Content

Gaps

Grid currently supports multiple predefined gap sizes: 0, 4, 6, 8.

Content
Content

In the case of hiding any columns based on the viewport size, it's recommended to use Hidden utility. Grid supports Hidden out-of-the-box, correctly applying its classNames without adding any additional wrappers.

Column 1
Column 2

Alignment

If you're not using all 12 columns in your grid, you can align it horizontally with justify property like in css flexbox.

Content
Content

Responsive properties

Grid gapand Grid.Columnn size properties support responsive syntax. You can define different size per viewport by passing an array of values to it, where each item is a reference to a specific viewport size. Try resizing your screen to see the difference on every viewport size.

Column 1
Column 2

Accessibility

Both, Grid and Grid.Column, support as property allowing you to pass a custom html tag to be used. For instance, if you're using Grid to display a list of items – you can assign ul tag to Grid and li to each of its columns.

Properties

Grid properties:

NameTypeDefaultRequiredComment
gapnone, small, medium, largemediumfalseGutter size
justifystart, end, center-false
alignstart, end, center-false
asstringdivfalseTag used for render
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Grid.Column properties:

NameTypeDefaultRequiredComment
sizeResponsive(1-12)12false
asstringdivfalseTag used for render
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element