`tsx



`

$3

To get a basic CSS Grid:

`tsx



`

#### Inline

For an inline CSS Grid:

`tsx



`

#### Grid Template Rows

To modify grid-template-rows:

`tsx



`

#### Grid Template Columns

To modify grid-template-columns:

`tsx



`

#### Gap (Grid Gap)

To modify gap (grid-gap):

`tsx



`

#### Row Gap (Grid Row Gap)

To modify row-gap (grid-row-gap):

`tsx



`

#### Column Gap (Grid Column Gap)

To modify column-gap (grid-column-gap):

`tsx



`

#### Justify Items

To modify justify-items:

`tsx



`

To simplify, you can use:

`tsx
// justify-items: start;
// justify-items: end;
// justify-items: center;
// justify-items: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the justifyItems prop. Providing multiple will result in a console warning._

#### Align Items

To modify align-items:

`tsx



`

To simplify, you can use:

`tsx
// align-items: start;
// align-items: end;
// align-items: center;
// align-items: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignItems prop. Providing multiple will result in a console warning._

#### Justify Content

To modify justify-content:

`tsx



`

To simplify, you can use:

`tsx
// justify-content: start;
// justify-content: end;
// justify-content: center;
// justify-content: stretch;
// justify-content: space-around;
// justify-content: space-between;
// justify-content: space-evenly;
`

_These are first come first served, in this order. They cannot be used if you have already provided the justifyContent prop. Providing multiple will result in a console warning._

#### Align Content

To modify align-content:

`tsx



`

To simplify, you can use:

`tsx
// align-content: start;
// align-content: end;
// align-content: center;
// align-content: stretch;
// align-content: space-around;
// align-content: space-between;
// align-content: space-evenly;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignContent prop. Providing multiple will result in a console warning._

#### Grid Auto Flow

To modify grid-auto-flow:

`tsx



`

To simplify, you can use:

`tsx
// grid-auto-flow: row;
// grid-auto-flow: column;
// grid-auto-flow: dense;
`

_These are first come first served, in this order. They cannot be used if you have already provided the autoFlow prop. Providing multiple will result in a console warning._

#### Grid Auto Rows

To modify grid-auto-rows:

`tsx



`

#### Grid Auto Columns

To modify grid-auto-columns:

`tsx



`

#### Grid Template (Shorthand)

To modify grid-template:

`tsx



`

#### Place Items (Shorthand)

To modify place-items:

`tsx



`

#### Place Content (Shorthand)

To modify place-content:

`tsx



`

$3

To help with structuring your components, a Grid Item is also available.

`tsx








`

#### Grid Column Start | Grid Column End

To modify grid-column-start or grid-column-end:

`tsx





`

#### Grid Column (Shorthand)

To modify grid-column:

`tsx





`

#### Grid Row Start | Grid Row End

To modify grid-row-start or grid-row-end:

`tsx





`

#### Grid Row (Shorthand)

To modify grid-row:

`tsx





`

#### Grid Area (Shorthand)

To modify grid-area:

`tsx





`

#### Justify Self

To modify justify-self:

`tsx





`

To simplify, you can use:

`tsx
// justify-self: start;
// justify-self: end;
// justify-self: center;
// justify-self: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the justifySelf prop. Providing multiple will result in a console warning._

#### Align Self

To modify align-self:

`tsx





`

To simplify, you can use:

`tsx
// align-self: start;
// align-self: end;
// align-self: center;
// align-self: stretch;
`

_These are first come first served, in this order. They cannot be used if you have already provided the alignSelf prop. Providing multiple will result in a console warning._

#### Place Self (Shorthand)

To modify place-self:

`tsx





`

Notes

$3

All the React div props and TypeScript definitions are exposed/passed through. This allows for an identical development experience whilst being able to ignore any Grid related CSS.

`tsx








`

$3

CSS provided via styles will be applied last, this allows all generated CSS to be overridden.

`tsx
inline // this will get overridden
style={{
display: 'grid', // this will override everything else
}}>




`

$3

If the as prop is not provided, it will default to a