Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
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 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).Can also be used for grid item Grid.
gridColumn
CSSProperties[gridColumn]
gridColumnEnd
CSSProperties[gridColumnEnd]
gridColumnStart
CSSProperties[gridColumnStart]
gridRowEnd
CSSProperties[gridRowEnd]
gridRowStart
CSSProperties[gridRowStart]
justifySelf
CSSProperties[justifySelf]
Can also be used for grid item Grid.
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).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).
