The Tiles component is used to lay out elements as equally-sized elements, optionally wrapping on multiple lines as well as a stack when space is limited. If you have a direct child of `Tiles` that you don’t want to stretch, wrap that child in a `View` component. ```ts?title: "JS" import {extend, View, Tiles} from '@shopify/post-purchase-ui-extensions'; extend('Checkout::PostPurchase::Render', (root) => { const tiles = root.createComponent(Tiles, undefined, [ root.createComponent(View, {border: 'base', padding: 'base'}, 'View'), root.createComponent(View, {border: 'base', padding: 'base'}, 'View'), root.createComponent(View, {border: 'base', padding: 'base'}, 'View'), ]); root.appendChild(tiles); }); ``` ```tsx?title: "React" import {render, Tiles, View} from '@shopify/post-purchase-ui-extensions-react'; render('Checkout::PostPurchase::Render', () => ); function App() { return ( View View View ); } ``` ## Props optional = ? | Name | Type | Description | | --- | --- | --- | | maxPerLine? | number | Number of tiles per line. | | breakAt? | number | Width of the component when the tiles stack on the cross-axis. Each tile will then take all the available space. It accepts a number in pixel. If not specified, the tiles will never stack and each of them will progressively shrink when the screen is resized. | | alignment? | "leading" | "center" | "trailing" | Position tiles along the cross axis | | spacing? | "xtight" | "tight" | "loose" | "xloose" | Adjust spacing between tiles |