Grid

The <Grid> component is a versatile tool to arrange child elements within a two-dimensional grid structure (CSS Grid).

Usage

<Grid> allows full control over columns and rows sizes, spacing between children, and the overall height. It is highly customizable, so that the <Grid> can be used optimally for complex layouts.

One of the benefits of using <Grid> is that its associated component, <Grid.Area>, don't need to be arranged in any specific order. They will be automatically positioned based on their name prop. If you'd like to understand more about how grid template areas function, you can find a detailed article here.

Holy Grail

Below you find an example demonstrating how to create the holy grail layout using the <Grid> component below. It is usefull if you need easy vertical and horizontal alignment of content while staying responsive.

Preview

Code

Header

Sidebar

Main

Footer

Bento

The <Grid> component can also be used to create bento layouts. Here is an examples for a more complex grid, where every element has its own dimensions.

Preview

Code

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Grid stories

Grid

alignX?

"left" | "center" | "right";

Horizontal alignment for the children.

alignY?

"center" | "top" | "bottom";

Vertical alignment for the children.

areas

string[]

Specifies the named grid areas, much like grid-template-areas.

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

"off" | "polite" | "assertive";

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

children?

ReactNode;

Children of the layout.

columns

TemplateValue[]

Specifies the width of each column in the grid.

height?

HeightProp;

Set the height of the element. You can see allowed tokens here.

Defaults to:

"auto"

id?

string;

The element's unique identifier. See MDN.

role?

(string & {}) | "region";

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

rows

TemplateValue[]

Specifies the height of each rows in the grid.

space?

GapSpaceProp;

The space between the children. You can see allowed tokens here.

Defaults to:

Grid.Area

children?

ReactNode;

Children of the component.

name

string;

Name of the grid area slot.

Alternative components

Since the <Grid> component should be used when you need to create more complex layouts, the following components can can help you if you need simpler layout structures.

Tiles: With <Tiles> you have the possibility to create equal wide elements in a grid system.
Column: If you need to have elements placed in one line.

Building layouts

Learn how to build layouts.

Last update: 3 months ago

Usage

<Grid> allows full control over columns and rows sizes, spacing between children, and the overall height. It is highly customizable, so that the <Grid> can be used optimally for complex layouts.

Preview

Code

Header

Sidebar

Main

Footer

The <Grid> component can also be used to create bento layouts. Here is an examples for a more complex grid, where every element has its own dimensions.

Preview

Code

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Grid stories

alignX?

"left" | "center" | "right";

Horizontal alignment for the children.

alignY?

"center" | "top" | "bottom";

Vertical alignment for the children.

areas

string[]

Specifies the named grid areas, much like grid-template-areas.

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

"off" | "polite" | "assertive";

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

children?

ReactNode;

Children of the layout.

columns

TemplateValue[]

Specifies the width of each column in the grid.

height?

HeightProp;

Set the height of the element. You can see allowed tokens here.

Defaults to:

"auto"

id?

string;

The element's unique identifier. See MDN.

role?

(string & {}) | "region";

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

rows

TemplateValue[]

Specifies the height of each rows in the grid.

space?

GapSpaceProp;

The space between the children. You can see allowed tokens here.

Defaults to:

children?

ReactNode;

Children of the component.

name

string;

Name of the grid area slot.

Alternative components

Since the <Grid> component should be used when you need to create more complex layouts, the following components can can help you if you need simpler layout structures.

Tiles: With <Tiles> you have the possibility to create equal wide elements in a grid system.

Column: If you need to have elements placed in one line.