Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.

Examples

  <.inline_grid gap={[xs: 1, md: "2fr 1fr"]}>
    <div>Contents</div>
    <div>Contents</div>
  </.inline_grid>

See

• https://polaris.shopify.com/components/layout-and-structure/inline-grid
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/InlineGrid/InlineGrid.tsx

Attributes

• gap (:list) - The spacing between children. Accepts a spacing token or an object of spacing tokens for different screen sizes.Examples include [xs: "200"], and [xs: "100", sm: "200", md: "300", lg: "400", xl: "500"].
• columns (:list) - The number of columns to display. Accepts either a single value or an object of values for different screen sizes.Examples include [xs: 2], [xs: 1, sm: 2, md: 3, lg: 4, xl: 6], and [xs: 1, md: "2fr 1fr"].
• align_items (:string) - Vertical alignment of children. If not set, inline elements will stretch to the height of the parent.Must be one of "start", "end", or "center".
• class (:any) - A class name to be added to the component class name. Defaults to "".
• style (:string) - Style attribute.
• display (:string) - Style attribute.
• margin (:string) - Style attribute.
• max_height (:string) - Style attribute.
• min_height (:string) - Style attribute.
• object_fit (:string) - Style attribute.
• flex_grow (:string) - Style attribute.
• justify_content (:string) - Style attribute.
• grid_auto_rows (:string) - Style attribute.
• grid_template_columns (:string) - Style attribute.
• grid_template_rows (:string) - Style attribute.
• align_self (:string) - Style attribute.

Slots

• inner_block

Build Style elements