Props available in Anvil2 components to create and manage layouts using CSS Flexbox and Grid properties.
Layout Props Overview
All Anvil2 components accept a set of props used for adjusting CSS Flexbox and Grid properties by extending the LayoutUtilProps type.
Each of these props correspond to a CSS property that is applied to the outermost element rendered by that component.
Some of the props are used for Flexbox or Grid containers, and others for items, which need to have a Flex or Grid component as a parent, or another component with display: flex|grid.
Note: Some components exclude certain properties (see exceptions below).
Available Props
| Context | Prop | CSS Property |
|---|
| Flex Container | flexDirection | flex-direction |
| Flex Item | flex | flex |
| Flex Item | flexGrow | flex-grow |
| Flex Item | flexShrink | flex-shrink |
| Flex Item | flexBasis | flex-basis |
| Grid Item | gridArea | grid-area |
| Grid Item | gridColumn | grid-column |
| Grid Item | gridColumnEnd | grid-column-end |
| Grid Item | gridColumnStart | grid-column-start |
| Grid Item | gridRow | grid-row |
| Grid Item | gridRowEnd | grid-row-end |
| Grid Item | gridRowStart | grid-row-start |
| Grid Item | justifySelf | justify-self |
| Flex or Grid Container | alignContent | align-content |
| Flex or Grid Container | alignItems | align-items |
| Flex or Grid Container | columnGap | column-gap |
| Flex or Grid Container | gap | gap |
| Flex or Grid Container | justifyContent | justify-content |
| Flex or Grid Container | justifyItems | justify-items |
| Flex or Grid Container | order | order |
| Flex or Grid Container | placeContent | place-content |
| Flex or Grid Container | placeItems | place-items |
| Flex or Grid Container | rowGap | row-gap |
| Flex or Grid Item | alignSelf | align-self |
| Flex or Grid Item | placeSelf | place-self |
Exceptions
The following components exclude the flex, flexBasis, and flexGrow props from LayoutUtilProps since the sizing and/or positioning is predetermined:
- Alert
- Avatar
- Badge
- Chip
- Icon
Flex and Grid
The Flex and Grid components accept all of the LayoutUtilProps, but without the “flex” or “grid” prefix of a few of the props.
For example, flexDirection is just direction on a Flex, and gridTemplateColumns changes to templateColumns on a Grid.
Cards
In Anvil2, Cards are Flexbox containers with no default presets for the Flexbox properties. Similar to Flex, they can use the Flex Container props without adding display: flex in CSS.
<Card flexDirection="column" alignItems="center">
<Text>Some text...</Text>
<Button>Centered Button</Button>
</Card>
children are also Flexbox containers, but usually have a default flexDirection, gap, etc. Card is shown here because adjusting the layout props will be more common in cards than alerts, side navs, or others.
Responsive Layout Props
To enable responsive layout shifts based on preset breakpoints, the following props are also available, which accept objects with the LayoutUtilProps type:
| Prop | Breakpoint |
|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
xxl | 1536px |
flexGrow) are applied from the smallest screen size (less than 640px) and larger. When responsive layout props are used, they override the default value at that breakpoint and larger.
<Button
// xs and sm screens
alignSelf="center"
// md, lg, and xl screens
md={{ alignSelf: "flex-end" }}
// xxl screens and above
xxl={{ alignSelf: "center" }}
{...otherProps}
/>
Layout Props Examples
Flexbox Example
Grid Example
Last modified on January 23, 2026
