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

# Layout Props

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

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](/docs/web/components/flex/code/) or [Grid](/docs/web/components/grid/code/) 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](/docs/web/components/flex/code/) and [Grid](/docs/web/components/grid/code/) 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](/docs/web/components/card/code/) are Flexbox containers with no default presets for the Flexbox properties. Similar to [Flex](/docs/web/components/card/code/), they can use the Flex Container props without adding `display: flex` in CSS.

```tsx theme={null}
<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.

```tsx theme={null}
<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

<LiveCode example="layoutprops-flex" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Flex, Avatar, Text, Button } from "@servicetitan/anvil2";

  function App() {
    return (
      <Flex direction="column" gap="2" alignItems="center">
        <Avatar size="large" name="Charlie Sparks" />
        <Text variant="headline" el="h3" size="large">
          Charlie Sparks
        </Text>
        <Text alignSelf="flex-start">
          <strong>Role: </strong>Journeyman Electrician <br />
          <strong>Experience: </strong>13 years <br />
          <strong>Phone: </strong>402-555-6974 <br />
        </Text>
        {/* This flex is an Item and a Container */}
        <Flex alignSelf="stretch">
          <Button flexGrow="1">Message Technician</Button>
        </Flex>
      </Flex>
    );
  }

  export default App;
  ```
</LiveCode>

### Grid Example

<LiveCode example="layoutprops-grid" screenshot fullWidth>
  ```tsx lines theme={null}
  import { Grid, Flex, Text, Card, Button } from "@servicetitan/anvil2";

  function App() {
    return (
      <Grid rowGap="2" columnGap="3" templateColumns="8rem repeat(3,1fr)">
        <Flex direction="column" gridColumn="1/5">
          <Text variant="headline" el="h2" size="large">
            Summary
          </Text>
          <Text>See more details below.</Text>
        </Flex>
        <Card gridArea="2/1/3/2" flexDirection="column" gap="2">
          <Text variant="headline" el="h3">
            Card 1
          </Text>
          <Card background="stronger" />
          <Card background="stronger" />
        </Card>
        <Card gridArea="2/2/3/5" flexDirection="column">
          <Text variant="headline" el="h3">
            Card 2
          </Text>
          <Text flexGrow={1}>Lorem ipsum dolor sit amet.</Text>
          <Button alignSelf="flex-end">Share</Button>
        </Card>
      </Grid>
    );
  }

  export default App;
  ```
</LiveCode>