Layout Props

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>

Note: Several other components that accept content as 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`

Any values passed to regular props (e.g. 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}
/>

Anvil2 Web

Resources

Layout Props Overview

Available Props

Exceptions

Flex and Grid

Cards

Responsive Layout Props

Layout Props Examples

Flexbox Example

Grid Example

​Layout Props Overview

​Available Props

​Exceptions

​Flex and Grid

​Cards

​Responsive Layout Props

​Layout Props Examples

​Flexbox Example

​Grid Example

Layout Props Overview

Available Props

Exceptions

Flex and Grid

Cards

Responsive Layout Props

Layout Props Examples

Flexbox Example

Grid Example