Layout Grid

Basic layout grid

Simple three-column grid with a consistent gap.

Item 1
Item 2
Item 3

Span and alignment

Column spanning and item placement using alignment and justify modifiers.

Col span 2
Justify end
Align end
Full row item

Container query example

Container query breakpoints activated with the cq modifier.

Card A
Card B
Card C
Card D

Parameters (Blade)

Key Default value Type Available values Description
class
Base layout-grid class with optional grid and item modifiers. string o-layout-grid | o-layout-grid--cols-{n} | o-layout-grid--gap-{n} | o-layout-grid--col-span-{n} | o-layout-grid--row-span-{n} | o-layout-grid--justify-{placement} | o-layout-grid--align-{placement} | o-layout-grid--cq -
id
string - The DOM id of the component.
classList
[] array - Array containing wrapping classes array
attributeList
[] array - Array containing keys and values rendered as attributes

Container Query Support

Enable container query support by adding the .o-layout-grid--cq modifier to the grid container. This is needed to use container query based modifiers.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--cq
Enables container query support (container-type: inline-size; container-name: layout-grid;). - No No

Column and Row Span

Make grid items span multiple columns or rows using the span modifiers.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--col-span-{n}
Make an item span n columns. 1-12 Yes Yes
o-layout-grid--row-span-{n}
Make an item span n rows. 1-12 Yes Yes

Number of Columns

Set the number of columns in the layout grid.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--cols-{n}
Set the number of columns. 1-12 Yes Yes

Order

Control the order of grid items.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--order-{n}
Set the order of an item. 0-24 Yes Yes

Gap

Available gap settings in the layout grid

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--gap-{n}
Set the gap between grid items. 0-24 Yes Yes
o-layout-grid--row-gap-{n}
Set the row gap. 0-24 Yes Yes
o-layout-grid--column-gap-{n}
Set the column gap. 0-24 Yes Yes

Justify Placement

Control horizontal alignment of grid items.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--justify-start
Align an item to the start horizontally (justify-self: start). - Yes Yes
o-layout-grid--justify-center
Align an item to the center horizontally (justify-self: center). - Yes Yes
o-layout-grid--justify-end
Align an item to the end horizontally (justify-self: end). - Yes Yes
o-layout-grid--justify-stretch
Stretch an item horizontally (justify-self: stretch). - Yes Yes

Align Placement

Control vertical alignment of grid items.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--align-start
Align an item to the start vertically (align-self: start). - Yes Yes
o-layout-grid--align-center
Align an item to the center vertically (align-self: center). - Yes Yes
o-layout-grid--align-end
Align an item to the end vertically (align-self: end). - Yes Yes
o-layout-grid--align-stretch
Stretch an item vertically (align-self: stretch). - Yes Yes

Auto Rows

Set the grid-auto-rows property for the layout grid.

Available Modifiers

Modifier Description Values Responsive Container Query
o-layout-grid--grid-auto-rows-auto
Set grid-auto-rows to auto. - Yes Yes
o-layout-grid--grid-auto-rows-min-content
Set grid-auto-rows to min-content. - Yes Yes
o-layout-grid--grid-auto-rows-max-content
Set grid-auto-rows to max-content. - Yes Yes
o-layout-grid--grid-auto-rows-equal
Set grid-auto-rows to 1fr (equal height rows). - Yes Yes