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	Description
align	"center" | "baseline" | "flex-start" | "flex-end" | "stretch" | undefined	'stretch'	The vertical alignment of the grid items
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The children of the Grid component
className	string | undefined		CSS class name to apply to each element within the component
columns	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined	12	The number of columns in the grid
css	CSSProperties | Partial<Record<"abyss-grid", CSSProperties>> | undefined		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 | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	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.
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
justify	"center" | "flex-start" | "flex-end" | "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
slotProps	Partial<Record<"grid", SlotPropsLeafValue>> | undefined
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
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Grid.Col Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The children of the GridCol component
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-grid-col", CSSProperties>> | undefined	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 | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
span	string | number | Record<string, string | number> | undefined	The span of the grid column
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

Grid Classes

Class Name	Description
.abyss-grid	Grid root element

Grid.Col Classes

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