Grid

Usage

Areas

A grid can define explicit sections with areas.

Template Columns

A grid can define explicit columns and rows. A value can be a grid length value or a Hopper spacing scale value.

Auto Columns

A grid can define the size of implicitly created columns. A value can be a grid length value or a Hopper spacing scale value.

Gap

A grid layout can have a gap between its columns and rows. columnGap and rowGap are also available to specify a gap for a single axis.

Column Spanning

A grid item can span over multiple columns.

Nesting

Grids can be nested to create complex layouts.

Repeat

A custom repeat function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS repeat function.

Minmax

A custom minmax function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS minmax function.

Fit Content

A custom fit-content function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS fit-content function.

Best Practices

Grid is a powerful layout component for creating two-dimensional layouts with rows and columns. It's ideal for complex application layouts, data tables, card grids, and any scenario where precise control over both horizontal and vertical positioning is needed.

Grid should:

• Be used for two-dimensional layouts where items need to align both horizontally and vertically.
• Use Hopper dimension tokens for templateColumns, templateRows, and spacing properties to ensure consistency.
• Leverage named grid areas for semantic and maintainable layout definitions.
• Use the custom repeat(), minmax(), and fitContent() functions to support Hopper tokens.

Do's and Don'ts

Props