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" | "baseline" | "stretch" | "flex-end" | "flex-start"	'stretch'	-	The vertical alignment of the grid items
children	React.ReactNode	-	-	The children of the Grid component
className	string	-	-	CSS class name to apply to each element within the component
columns	5 | 3 | 4 | 2 | 1 | 7 | 6 | 9 | 8 | 10 | 12 | 11	12	-	The number of columns in the grid
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
justify	"center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start"	'flex-start'	-	The horizontal alignment of the grid items
noWrap	boolean	false	-	If true, the grid items will not wrap
space	number | Record<string, string | number>	'{ xs: 16, sm: 16, md: 24, lg: 24, xl: 24 },'	-	The space between grid items
span	string | number | Record<string, string | number>	-	-	The span of the grid items

Grid.Col Props

Name	Type	Default	Required	Description
children	React.ReactNode	-	-	The children of the GridCol component
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
span	string | number | Record<string, string | number>	-	-	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