Grid

Used to manage grid layouts

Source: packages/chakra-ui-solid/src/components/gridChakra UI ↗

import { Grid } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function GridBasic() {
  return (
    <Grid templateColumns="repeat(3, 1fr)" gap="6">
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
    </Grid>
  );
}

Usage

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

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

Examples

Col Span

Pass colSpan prop to GridItem to span across columns.

import { Grid, GridItem } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function GridWithColSpan() {
  return (
    <Grid templateColumns="repeat(4, 1fr)" gap="6">
      <GridItem colSpan={2}>
        <DecorativeBox h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <DecorativeBox h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <DecorativeBox h="20" />
      </GridItem>
    </Grid>
  );
}

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

import { Grid, GridItem } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function GridSpanningColumns() {
  return (
    <Grid h="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap="4">
      <GridItem rowSpan={2} colSpan={1}>
        <DecorativeBox>rowSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={2}>
        <DecorativeBox>colSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={2}>
        <DecorativeBox>colSpan=2</DecorativeBox>
      </GridItem>
      <GridItem colSpan={4}>
        <DecorativeBox>colSpan=4</DecorativeBox>
      </GridItem>
    </Grid>
  );
}

Props

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"`.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: HTMLChakraProps<"div">. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

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

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.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.