Build Style elements

Create complex layouts based on CSS Grid.

Examples

<.grid columns={[sm: 3]}>

<:grid_cell column_span={[xs: 6, sm: 3, md: 3, lg: 6, xl: 6]}>
  <.card>
    <.text as="h2" variant="bodyMd">View a summary of your online store’s sales.</.text>
  </.card>
</:grid_cell>
<:grid_cell column_span={[xs: 6, sm: 3, md: 3, lg: 6, xl: 6]}>
  <.card>
    <.text as="h2" variant="bodyMd">View a summary of your online store’s orders.</.text>
  </.card>
</:grid_cell>

</.grid>

See

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

Attributes

• columns (:list) - The number of columns at a breakpoint.Examples include [xs: 6, sm: 3, md: 3, lg: 6, xl: 6].
• areas (:list) - grid-areas.Examples include [xs: ["product product sidebar", "product product sidebar"]].
• 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_items (:string) - Style attribute.
• align_self (:string) - Style attribute.

Slots

• grid_cell - the slots for grid cells. Accepts attributes:
  • column_span (:list) - The size of each column at a breakpoint.Examples include [xs: 6, sm: 3, md: 3, lg: 6, xl: 6].
  • area (:string) - Area name for the grid cell.
  • 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_items (:string) - Style attribute.
  • align_self (:string) - Style attribute.

See

• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Grid/components/Cell/Cell.tsx

Attributes

• area (:string) - Area name for the grid cell.
• column_span (:list) - The number of columns a cell spans at each breakpoint.Examples include [xs: 6, sm: 3, md: 3, lg: 6, xl: 6].
• 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_items (:string) - Style attribute.
• align_self (:string) - Style attribute.

Slots

• inner_block (required)

Build Style elements