---
title: Migrate InlineGrid from Polaris React
description: >-
  Replace Polaris React InlineGrid with s-grid and translate column tracks,
  gaps, and alignment explicitly.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-grid
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-grid.md
api_name: app-home
---

# Migrate Inline​Grid from Polaris React

Replace Polaris React `InlineGrid` with [`s-grid`](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/grid). Keep grid when columns need an explicit relationship; use `s-stack direction="inline"` for a simple sequence of controls.

***

## Migrate an inline grid

## Migrating responsive inline columns

##### Polaris web components

```html
<s-stack gap="base">
  <s-text type="strong">Narrow container (375px)</s-text>
  <s-box inlineSize="375px">
    <s-query-container>
      <s-grid
        gridTemplateColumns="@container (inline-size > 400px) 1fr 1fr 1fr, 1fr"
        gap="base"
      >
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 1</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 2</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 3</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-query-container>
  </s-box>

  <s-text type="strong">Wide container (450px)</s-text>
  <s-box inlineSize="450px">
    <s-query-container>
      <s-grid
        gridTemplateColumns="@container (inline-size > 400px) 1fr 1fr 1fr, 1fr"
        gap="base"
      >
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 1</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 2</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 3</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-query-container>
  </s-box>
</s-stack>
```

##### Polaris React

```tsx
import {InlineGrid} from '@shopify/polaris';

<InlineGrid columns={{xs: 1, md: '1fr 1fr 1fr'}} gap="400" alignItems="center">
  <Metric />
  <Metric />
  <Metric />
</InlineGrid>
```

Map `columns` to `gridTemplateColumns`, `gap` to a documented spacing keyword, and `alignItems` directly when the value is supported. Express `rows` with `gridTemplateRows` only when row sizing is required.

Polaris responsive aliases and numeric spacing tokens aren't destination values. Re-evaluate the actual content thresholds and use container-responsive syntax inside `s-query-container`. Prefer `minmax(0, 1fr)` for tracks whose long content must shrink.

Don't use grid to align unrelated rows in ways that change DOM order. For field/action pairs, keep the field first in DOM order and use a final `auto` track for the action.

***

## Test the migration

* Resize the embedded container through every query threshold.
* Test missing and conditionally rendered children.
* Use long translated text, field errors, and 200% zoom.
* Verify reading and focus order remains logical in one and multiple columns.

***

## Remove Polaris React

Remove `InlineGrid`, responsive-token adapters, and wrappers used only to emulate its gap after migration. Remove `@shopify/polaris` only after no other route in scope imports it.

***

## Related guidance

* [Grid component](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/grid)
* [Migrate Grid from Polaris React](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/grid)

***