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 NameTypeDefaultDescription
gridAreasstringDefines 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.
gridAutoColumnsstringSpecifies 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 | unsetControls how auto placement of grid items work. Same as the grid-auto-flow CSS property.
gridAutoRowsstringSpecifies the size of any auto-generated row grid tracks. Same as the grid-auto-rows CSS property.
gridColumnsstringDefines the columns of the grid with a space-separated list of values. Same as the grid-template-columns CSS property.
gridGapstringControls the spacing between grid items. Same as the grid-gap CSS property.
gridRowsstringDefines the rows of the grid with a space-separated list of values. Same as the grid-template-rows CSS property.
gridTemplatestringShorthand 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 NameTypeDefaultDescription
gridAreastringGives a grid item and area defined via grid-template-areas. Same as the grid-area CSS property.
gridColumnstringShorthand for grid-column-start and grid-column-end. Same as the grid-column CSS property.
gridColumnEndstringDetermines a grid item's location within the grid by referring to specific grid lines. Same as the grid-column-end CSS property.
gridColumnStartstringDetermines a grid item's location within the grid by referring to specific grid lines. Same as the grid-column-start CSS property.
gridRowstringShorthand for grid-row-start and grid-row-end. Same as the grid-row CSS property.
gridRowEndstringDetermines a grid item's location within the grid by referring to specific grid lines. Same as the grid-row-end CSS property.
gridRowStartstringDetermines 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

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