Grid

The Grid component is useful for creating intrinsicly responsive layouts. Grid Design Guidelines.

Item 1
Item 2
Item 3
Item 4

Edit the code below to see your changes live!

API

Grid

Prop Name
Type
Default
Description
gridAreasstring

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property of a grid item. Same as the grid-template-areas CSS property.

gridAutoColumnsstring

Specifies the size of any auto-generated column grid tracks. Same as the grid-auto-columns CSS property.

gridAutoFlowrow | column | dense | row dense | column dense | inherit | initial | unset

Controls how auto placement of grid items work. Same as the grid-auto-flow CSS property.

gridAutoRowsstring

Specifies the size of any auto-generated row grid tracks. Same as the grid-auto-rows CSS property.

gridColumnsstring

Defines the columns of the grid with a space-separated list of values. Same as the grid-template-columns CSS property.

gridGapstring

Controls the spacing between grid items. Same as the grid-gap CSS property.

gridRowsstring

Defines the rows of the grid with a space-separated list of values. Same as the grid-template-rows CSS property.

gridTemplatestring

Shorthand for grid-template-columns, grid-template-rows, and grid-template-areas. Same as the grid-template CSS property.

Props ending with * are required

Grid.Item

Prop Name
Type
Default
Description
gridAreastring

Gives a grid item and area defined via grid-template-areas. Same as the grid-area CSS property.

gridColumnstring

Shorthand for grid-column-start and grid-column-end. Same as the grid-column CSS property.

gridColumnEndstring

Determines a grid item's location within the grid by referring to specific grid lines. Same as the grid-column-end CSS property.

gridColumnStartstring

Determines a grid item's location within the grid by referring to specific grid lines. Same as the grid-column-start CSS property.

gridRowstring

Shorthand for grid-row-start and grid-row-end. Same as the grid-row CSS property.

gridRowEndstring

Determines a grid item's location within the grid by referring to specific grid lines. Same as the grid-row-end CSS property.

gridRowStartstring

Determines a grid item's location within the grid by referring to specific grid lines. Same as the grid-row-start CSS property.

Props ending with * are required

Inherited Props

Expand

Box Props

Expand

Display Props

Expand

Margin Props

Expand

Padding Props

Examples

Grid allows you to create custom layouts using combinations of gridTemplate and gridArea props.

Header
Sidebar
Content
Footer

Edit the code below to see your changes live!

You can use the gridColumns prop to create columned layouts.

Reprehenderit ullamco et elit eu duis non reprehenderit eiusmod pariatur ea deserunt irure. Reprehenderit et incididunt sit aute sint proident eu eiusmod pariatur Lorem nulla labore irure nisi. Adipisicing do duis occaecat ipsum dolor ea. Qui consectetur sint eu nulla duis et commodo anim commodo. Ullamco consectetur elit ullamco aliquip do id consectetur anim laborum.
In sit dolore culpa reprehenderit tempor laborum. Sit anim voluptate pariatur irure amet mollit. Est mollit ad pariatur esse eu reprehenderit ut veniam. Aliquip anim mollit aliquip quis officia minim esse laboris proident fugiat cillum. Eiusmod culpa eu ea eiusmod nostrud.
Ipsum adipisicing pariatur magna quis incididunt amet pariatur. Aliqua voluptate consequat ut elit ea dolore officia reprehenderit exercitation dolore eiusmod cupidatat quis. Ullamco ipsum do deserunt sunt ad deserunt ut. Elit non velit dolore ad est eu.

Edit the code below to see your changes live!

Beta