Migrate InlineGrid from Polaris React

Replace Polaris React InlineGrid with s-grid. Keep grid when columns need an explicit relationship; use s-stack direction="inline" for a simple sequence of controls.

Anchor to Migrate an inline gridMigrate an inline grid

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

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.

Anchor to Test the migrationTest 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.

Anchor to Remove Polaris ReactRemove 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.

Anchor to Related guidanceRelated guidance

• Grid component
• Migrate Grid from Polaris React