Last modified: August 22, 2025
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.
Screenshot of a simple implementation of the AutoGrid component
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>
PropTypeDescription
columnWidth RequiredNumberSets width of each column in pixels. When flexible is true, acts as minimum width before expanding.
gapflush (default) | 'xs', 'extra-small' | 'sm', 'small' | 'med', 'medium' | lg, large | xl, extra-largeSets spacing between grid items.
flexibleBooleanWhen false, columns have exact columnWidth. When true, columns expand equally to fill available space with columnWidth as the minimum. Default is false.

​
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}.
Screenshot of a simple implementation of the AutoGrid UI extension component
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

Screenshot of the AutoGrid component with custom gap
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>

​