Layout Grid
The layout grid object (.o-layout-grid) provides a flexible CSS grid system with responsive and container query support.
Use .o-layout-grid to create grid layouts. Modifiers allow you to control columns, gaps, spans, and alignment responsively or with container queries.
Classes reference
Container Query Support
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--cq | - | Enables container query support (container-type: inline-size; container-name: layout-grid;). | no | no |
Column and Row Span
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--col-span-{n} | 1-12 | Make an item span n columns. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--row-span-{n} | 1-12 | Make an item span n rows. | @{breakpoint} | @cq-{breakpoint} |
Number of Columns
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--cols-{n} | 1-12 | Set the number of columns. | @{breakpoint} | @cq-{breakpoint} |
Order
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--order-{n} | 0-24 | Set the order of an item. | @{breakpoint} | @cq-{breakpoint} |
Gap
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--gap-{n} | 0-24 | Set the gap between grid items. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--row-gap-{n} | 0-24 | Set the row gap. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--column-gap-{n} | 0-24 | Set the column gap. | @{breakpoint} | @cq-{breakpoint} |
Justify Placement
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--justify-start | - | Align an item to the start horizontally (justify-self: start). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--justify-center | - | Align an item to the center horizontally (justify-self: center). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--justify-end | - | Align an item to the end horizontally (justify-self: end). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--justify-stretch | - | Stretch an item horizontally (justify-self: stretch). | @{breakpoint} | @cq-{breakpoint} |
Align Placement
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--align-start | - | Align an item to the start vertically (align-self: start). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--align-center | - | Align an item to the center vertically (align-self: center). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--align-end | - | Align an item to the end vertically (align-self: end). | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--align-stretch | - | Stretch an item vertically (align-self: stretch). | @{breakpoint} | @cq-{breakpoint} |
Auto Rows
| Class | Allowed values | Description | Viewport Responsive | Container Query Responsive |
| o-layout-grid--grid-auto-rows-auto | - | Set grid-auto-rows to auto. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--grid-auto-rows-min-content | - | Set grid-auto-rows to min-content. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--grid-auto-rows-max-content | - | Set grid-auto-rows to max-content. | @{breakpoint} | @cq-{breakpoint} |
| o-layout-grid--grid-auto-rows-equal | - | Set grid-auto-rows to 1fr (equal height rows). | @{breakpoint} | @cq-{breakpoint} |