Grid – Code

Implementation
Grid Container Props
Grid Item Props
Flex Item Props
Responsive Grid Props

Common Examples

import { Grid } from "@servicetitan/anvil2";

const ExampleComponent = () => (
  <Grid templateColumns="repeat(3, 1fr)">{/* grid items... */}</Grid>
);

Creating CSS Grid layouts

The Anvil2 Grid component enables building complex layouts using CSS Grid properties. A grid is ultimately an HTML div element with display: grid applied. Use the props listed below to apply other CSS Grid properties to the container.Note that a Grid is always a container, but can also be used as a grid item by wrapping it in another Grid, or even as a flex item if it is a child of a Flex or other element with display: flex.

Using Responsive prop

Grid, like many of our components, have sm, md, lg, xl, and xxl that can be used to control component’s layout properties.Resize window to mobile size to see it in action.

Best Practices

The Layout component should be used to create the overall column structure of a page’s content.
Use the Grid component to create CSS Grid containers within the page content.

<Grid
  templateColumns="repeat(3, 1fr)"
  templateRows="auto"
  templateAreas="header header header"
  gap="4"
  columnGap="2"
  rowGap="2"
  alignContent="stretch"
  alignItems="stretch"
  justifyContent="start"
  justifyItems="start"
  placeContent="center"
  placeItems="center"
  autoColumns="auto"
  autoRows="auto"
  inline={false}
/>

`Grid` Container Props

In addition to the props listed in the tables below, the Grid component can accept any valid HTML div props.Other than the gap and responsive props, each of the props listed corresponds to a CSS property.

autoColumns

CSSProperties[gridAutoColumns]

alignContent

CSSProperties[alignContent]

alignItems

CSSProperties[alignItems]

autoRows

CSSProperties[gridAutoRows]

columnGap

"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"

Applies to column-gap CSS property. See Spacing

gap

"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"

Applies to gap CSS property. See Spacing

inline

boolean

Applies display: inline-grid CSS property.

justifyContent

CSSProperties[justifyContent]

justifyItems

CSSProperties[justifyItems]

placeContent

CSSProperties[placeContent]

placeItems

CSSProperties[placeItems]

rowGap

"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "13" | "14"

Applies to row-gap CSS property. See Spacing

templateAreas

CSSProperties[gridTemplateAreas]

templateColumns

CSSProperties[gridTemplateColumns]

templateRows

CSSProperties[gridTemplateRows]

<Grid
  gridArea="header"
  gridColumn="1 / 3"
  gridColumnEnd="3"
  gridColumnStart="1"
  gridRow="1 / 2"
  gridRowEnd="2"
  gridRowStart="1"
  alignSelf="start"
  justifySelf="start"
  placeSelf="center"
  order={0}
/>

`Grid` Item Props

These props are used to configure the Grid component as a grid item (with a parent grid container).

alignSelf

CSSProperties[alignSelf]

Can also be used for grid item Grid.

gridArea

CSSProperties[gridArea]

gridColumn

CSSProperties[gridColumn]

gridColumnEnd

CSSProperties[gridColumnEnd]

gridColumnStart

CSSProperties[gridColumnStart]

gridRow

CSSProperties[gridRow]

gridRowEnd

CSSProperties[gridRowEnd]

gridRowStart

CSSProperties[gridRowStart]

justifySelf

CSSProperties[justifySelf]

order

CSSProperties[order]

Can also be used for grid item Grid.

placeSelf

CSSProperties[placeSelf]

Can also be used for grid item Grid.

<Grid flexBasis="auto" flex="0 1 auto" flexGrow={1} flexShrink={1} />

`Grid` Flex Item Props

These props are used to configure the Grid component as a flex item (with a parent Flex container).

flexBasis

CSSProperties[flexBasis]

flex

CSSProperties[flex]

flexGrow

CSSProperties[flexGrow]

flexShrink

CSSProperties[flexShrink]

<Grid
  sm={{ templateColumns: "1fr" }}
  md={{ templateColumns: "repeat(2, 1fr)" }}
  lg={{ templateColumns: "repeat(3, 1fr)" }}
  xl={{ gap: "4" }}
  xxl={{ alignItems: "center" }}
/>

Responsive `Grid` Props

The following props accept an object that allows any of the props listed in the table above, and applies them to the specified breakpoint (and above).

GridProps

>=640px

GridProps

>=768px

GridProps

>=1024px

GridProps

>=1280px

xxl

GridProps

>=1536px

​Common Examples

​Creating CSS Grid layouts

​Using Responsive prop

​Best Practices

​Grid Container Props

​Grid Item Props

​Grid Flex Item Props

​Responsive Grid Props

Common Examples

Creating CSS Grid layouts

Using Responsive prop

Best Practices

`Grid` Container Props

`Grid` Item Props

`Grid` Flex Item Props

Responsive `Grid` Props