Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
LayoutGrid
The grid pattern can be used to group a set of interactive elements, such as links, buttons, or checkboxes. Since only one element in the entire grid is included in the tab sequence, grouping with a grid can dramatically reduce the number of tab stops on a page.
One example of this is if you’re using Chrome, you can go to home page, try customizing your page (bottom right corner) using keyboard only. They use grid pattern for their background selection.
View code
Accessibility
LayoutGridCells are navigatable through keyboard Arrow Up, Down, Left, and Right. Holding Shift key will jump to last or first cell accordingly. Note that you need to ensure each row should be wrapped in an element with role row to ensure correct accessibility attributes.
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
- Layout Grid Examples: https://www.w3.org/TR/https://www.w3.org/WAI/ARIA/apg/example-index/grid/LayoutGrids.html
API
LayoutGrid
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
LayoutGridCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| col | number | ||
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| row | number |