Grid | Abyss

Grid

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

Live example

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

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

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

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

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

Name	Type	Default	Required	Description
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
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.

Name	Type	Default	Required	Description
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

Class Name	Description
.abyss-grid	Grid root element

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