Migrate InlineLayout to the Polaris grid component

The previous InlineLayout component has been replaced by the <s-grid> component. Use gridTemplateColumns to define the column tracks for your inline layout. <s-grid> is available in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris grid component.

Anchor to columnscolumns

The previous InlineLayout columns prop is now called gridTemplateColumns. The value format changes from an array to a CSS grid template string.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-grid gridTemplateColumns="1fr auto" gap="base">
      <s-text>Product name</s-text>
      <s-text>$9.99</s-text>
    </s-grid>
  );
}

import {
  reactExtension,
  InlineLayout,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <InlineLayout columns={['fill', 'auto']} spacing="base">
      <Text>Product name</Text>
      <Text>$9.99</Text>
    </InlineLayout>
  );
}

Anchor to spacingspacing

The previous InlineLayout spacing prop is now called gap.

Anchor to blockAlignmentblockAlignment

The previous InlineLayout blockAlignment prop is now called alignItems.

Anchor to inlineAlignmentinlineAlignment

The previous InlineLayout inlineAlignment prop has been replaced with justifyItems and justifyContent.

Anchor to borderborder

The previous InlineLayout border shorthand controlled border style (for example, border="dotted"). On <s-grid>, border controls border size by default and accepts a token-based shorthand for size, color, and style:

Anchor to borderWidthborderWidth

The previous InlineLayout borderWidth accepted 'base', 'medium', 'thick'. The Polaris grid borderWidth accepts a reduced keyword set: 'none', 'base', 'large', 'large-100', 'large-200'.

Anchor to displaydisplay

The previous InlineLayout display values 'inline' and 'block' are no longer accepted. The Polaris grid display accepts 'auto' (the default) and 'none'.

Anchor to paddingpadding

The previous InlineLayout padding prop's accepted values and multi-side shorthand format have changed.

Use the following mapping to migrate deprecated tokens:

The new token scale also adds 'small-500', 'small-300', 'small-100', 'small', 'large', 'large-100', 'large-300', and 'large-400'.

For more on the scale system, see Scale.

The multi-side shorthand format has also changed:

To set padding on a single side or axis, use paddingBlock or paddingInline instead of padding.

Anchor to accessibilityRoleaccessibilityRole

Several accessibilityRole values have been renamed in the Polaris grid component. Update them to the new role names:

Other previously supported roles ('main', 'header', 'footer', 'section', 'navigation', 'separator', 'status', 'alert') are accepted unchanged. The Polaris grid also adds the following new roles: