Renders a grid column.

Column sizes use Pure Admin's naming: percentage (5-100 in 5% increments) or fractions (1-2, 1-3, 2-3, 1-4, 3-4, 1-5, 2-5, 3-5, 4-5, 1-6, 5-6, 1-12, 5-12, 7-12, 11-12).

Note: Only multiples of 5 are valid for percentage widths (e.g. 25, 50, 75). For thirds use fractions: 1-3, 2-3. There is no 33 or 66.

Examples

<.column size="100" md="50" lg="1-3">Responsive column</.column>
<.column size="1-2" offset="25">Offset column</.column>

Attributes

• size (:string) - Base column size (e.g. '50', '1-3', '100'). Defaults to nil.
• sm (:string) - Size at sm breakpoint (>=576px). Defaults to nil.
• md (:string) - Size at md breakpoint (>=768px). Defaults to nil.
• lg (:string) - Size at lg breakpoint (>=992px). Defaults to nil.
• xl (:string) - Size at xl breakpoint (>=1200px). Defaults to nil.
• offset (:string) - Offset from left (e.g. '25', '35'). Defaults to nil.
• is_no_padding (:boolean) - Remove column padding. Defaults to false.
• is_grow (:boolean) - Flex grow to fill available space. Defaults to false.
• is_shrink (:boolean) - Flex shrink to fit content. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a grid row container.

Examples

<.grid>
  <.column size="50" md="1-3">Content</.column>
  <.column size="50" md="2-3">Content</.column>
</.grid>

<.grid is_same_height is_no_gutter>
  <.column size="1-3">Card 1</.column>
  <.column size="1-3">Card 2</.column>
  <.column size="1-3">Card 3</.column>
</.grid>

Attributes

• is_no_gutter (:boolean) - Defaults to false.
• is_same_height (:boolean) - Defaults to false.
• align (:string) - Defaults to nil.Must be one of nil, "center", "end", "between", "around", or "stretch".
• valign (:string) - Defaults to nil.Must be one of nil, "top", "middle", or "bottom".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)