import { Grid } from '@uhg-abyss/web/ui/Grid';

Live example

Resizing the width of the screen changes the column width, making Grid responsive.

Unresponsive (colspan)

Regardless of viewport width, the span will remain the same for these columns. Change the span by using column spans of the parent container.

Unresponsive (percent)

Regardless of viewport width, the span will remain the same for these columns. Change the span by using percentages of the parent container.

Responsive (colspan)

At each breakpoint, these columns will resize the span based on colspan. The breakpoints are xs, sm, md, and lg.

Responsive (percent)

At each breakpoint, these columns will resize the span based on percentage of the parent container. The breakpoints are xs, sm, md, and lg.

Grid Props

Name	Type	Default	Required	Description
align	'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | undefined	'stretch'	-	The vertical alignment of the grid items
children	React.ReactNode | undefined	-	-	The children of the Grid component
columns	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined	12	-	The number of columns in the grid
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined	'flex-start'	-	The horizontal alignment of the grid items
noWrap	boolean | undefined	false	-	If true, the grid items will not wrap
space	number | Record<string, string | number> | undefined	'{ xs: 16, sm: 16, md: 24, lg: 24, xl: 24 },'	-	The space between grid items
span	string | number | Record<string, string | number> | undefined	-	-	The span of the grid items

Grid.Col Props

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	The children of the GridCol component
span	string | number | Record<string, string | number> | undefined	-	-	The span of the grid column

Grid Classes

Class Name	Description
.abyss-grid	Grid root element

Grid.Col Classes

Class Name	Description
.abyss-grid-col	Grid column element