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.
The playground above uses Card only to visualize grid areas; grid items do not need a Card. See Card usage guidelines.

<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.

CSSProperties[gridAutoColumns]

CSSProperties[alignContent]

CSSProperties[alignItems]

CSSProperties[gridAutoRows]

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

Applies to column-gap CSS property. See Spacing

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

Applies to gap CSS property. See Spacing

boolean

Applies display: inline-grid CSS property.

CSSProperties[justifyContent]

CSSProperties[justifyItems]

CSSProperties[placeContent]

CSSProperties[placeItems]

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

Applies to row-gap CSS property. See Spacing

CSSProperties[gridTemplateAreas]

CSSProperties[gridTemplateColumns]

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).

CSSProperties[alignSelf]

Can also be used for grid item Grid.

CSSProperties[gridArea]

CSSProperties[gridColumn]

CSSProperties[gridColumnEnd]

CSSProperties[gridColumnStart]

CSSProperties[gridRow]

CSSProperties[gridRowEnd]

CSSProperties[gridRowStart]

CSSProperties[justifySelf]

CSSProperties[order]

Can also be used for grid item Grid.

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).

CSSProperties[flexBasis]

CSSProperties[flex]

CSSProperties[flexGrow]

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

GridProps

>=1536px

Anvil2 Web

Resources

Grid – Code

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

Common Examples

Creating CSS Grid layouts

Using Responsive prop

Best Practices

`Grid` Container Props

`Grid` Item Props

`Grid` Flex Item Props

Responsive `Grid` Props