Grid

Used to manage grid layouts

Usage

import { Grid, GridItem } from "chakra-ui-solid";

<Grid>
  <GridItem />
  <GridItem />
</Grid>

Examples

Col Span

Pass colSpan prop to GridItem to span across columns.

Spanning Columns

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution

rowSpan=2

colSpan=2

colSpan=4

Props

GridProps
Prop	Default	Type
`autoColumns`	—	`PlainCssValue<CssProperties['gridAutoColumns']>` The size of columns the grid creates on its own, beyond `templateColumns`.
`autoFlow`	—	`PlainCssValue<CssProperties['gridAutoFlow']>` Which way children with no explicit placement flow — `"row"`, `"column"`, `"dense"`.
`autoRows`	—	`PlainCssValue<CssProperties['gridAutoRows']>` The size of rows the grid creates on its own, beyond `templateRows`.
`column`	—	`PlainCssValue<CssProperties['gridColumn']>` This grid's own column placement in a parent grid — the `grid-column` shorthand.
`inline`	—	`boolean` Lay the children out inline, as `inline-grid` rather than `grid`.
`row`	—	`PlainCssValue<CssProperties['gridRow']>` This grid's own row placement in a parent grid — the `grid-row` shorthand.
`templateAreas`	—	`PlainCssValue<CssProperties['gridTemplateAreas']>` Named areas a child can be placed into by name, as `"'header header' 'sidebar main'"`.
`templateColumns`	—	`PlainCssValue<CssProperties['gridTemplateColumns']>` The column track list — `"repeat(3, 1fr)"`, `"200px 1fr"`. Not responsive; see the note below.
`templateRows`	—	`PlainCssValue<CssProperties['gridTemplateRows']>` The row track list — `"repeat(2, 1fr)"`, `"auto 1fr auto"`.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Every one of those props takes a plain CSS value rather than a responsive object. A track list is an arbitrary string, so its value cannot be a class anyone’s build generates — it rides an inline CSS custom property that a static rule reads back, and an inline style has no breakpoints. Writing templateColumns={{ base: "1fr", md: "1fr 1fr" }} is a type error here rather than a prop that silently does nothing; reach for the gridTemplateColumns style prop, which is conditional.

GridItem

GridItemProps
Prop	Default	Type
`area`	—	`PlainCssValue<CssProperties['gridArea']>` A named area from the parent Grid's `templateAreas`, or a four-line shorthand.
`colEnd`	—	`number \| 'auto'` The column line this item ends on, counting from 1. Beats the end line `colSpan` implies.
`colSpan`	—	`number \| 'auto'` How many columns this item spans. `auto` leaves the width to the auto-placement algorithm.
`colStart`	—	`number \| 'auto'` The column line this item starts on, counting from 1. Beats the start line `colSpan` implies.
`rowEnd`	—	`number \| 'auto'` The row line this item ends on, counting from 1. Beats the end line `rowSpan` implies.
`rowSpan`	—	`number \| 'auto'` How many rows this item spans. `auto` leaves the height to the auto-placement algorithm.
`rowStart`	—	`number \| 'auto'` The row line this item starts on, counting from 1. Beats the start line `rowSpan` implies.