> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 9bede5fc-46c1-4135-ac69-22f73cf54db8
---

# AutoGrid

> A responsive grid layout component that automatically arranges components. 

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

Use the `AutoGrid` component to arrange components into columns based on available space and specified column width restraints. Includes two modes: fixed column sizing (default), and flexible column sizing. For both modes, the layout will be responsive automatically, whether you're using it in an app card, app home page, or app settings page.

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-extensions-component-autogrid-simple-example-no-flex.png" alt="Screenshot of a simple implementation of the AutoGrid component" />
</Frame>

```jsx theme={null}
import { AutoGrid, Tile } from "@hubspot/ui-extensions";

<AutoGrid columnWidth={250} gap="small">
  <Tile>Item 1</Tile>
  <Tile>Item 2</Tile>
  <Tile>Item 3</Tile>
  <Tile>Item 4</Tile>
</AutoGrid>;
```

## Props

<ComponentProps autoGenerated componentName="AutoGrid">
  <ComponentProp name="columnWidth" required={true} type={<><code>number</code></>} description={<>Sets width of each column in pixels. When <code>flexible</code> is <code>true</code>, acts as minimum width before expanding.</>} />

  <ComponentProp name="children" required={false} type={<><code>ReactNode</code></>} description={<>Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.</>} />

  <ComponentProp name="flexible" required={false} type={<><code>boolean</code></>} description={<>When <code>false</code>, columns have exact <code>columnWidth</code>. When <code>true</code>, columns expand equally to fill available space with <code>columnWidth</code> as the minimum.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="gap" required={false} type={<><code>"extra-large"</code> | <code>"extra-small"</code> | <code>"flush"</code> | <code>"large"</code> | <code>"lg"</code> | <code>"md"</code> | <code>"medium"</code> | <code>"sm"</code> | <code>"small"</code> | <code>"xl"</code> | <code>"xs"</code></>} description={<>Sets spacing between grid items.</>} defaultValue={<><code>&quot;flush&quot;</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## Examples

### Flexible grid with minimum column width

With `flexible` set to `true`, the specified `columnWidth` is used as a minimum width. Compare the width of the tiles in this example to the example at the top of the page, which doesn't include `flexible={true}`.

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-extensions-component-autogrid-simple-example-with-flex.png" alt="Screenshot of a simple implementation of the AutoGrid UI extension component" />
</Frame>

```jsx theme={null}
import { AutoGrid, Tile } from "@hubspot/ui-extensions";

<AutoGrid columnWidth={250} gap="small" flexible={true}>
  <Tile>Item 1</Tile>
  <Tile>Item 2</Tile>
  <Tile>Item 3</Tile>
  <Tile>Item 4</Tile>
</AutoGrid>;
```

### Fixed card layout with large gap

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-extensions-component-autogrid-custom-gap.png" alt="Screenshot of the AutoGrid component with custom gap" />
</Frame>

```jsx theme={null}
import { AutoGrid, Card, Heading, Text } from "@hubspot/ui-extensions";

<AutoGrid columnWidth={300} gap="large" flexible={false}>
  <Card>
    <Heading>Product A</Heading>
    <Text>Description here</Text>
  </Card>
  <Card>
    <Heading>Product B</Heading>
    <Text>Description here</Text>
  </Card>
</AutoGrid>;
```

###

## Related components

* [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex)
* [Divider](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider)
* [Tile](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tile)