Grid
Grid is an object that allows you to create a grid of elements. Please note that we support both the .grid and .o-grid syntax. However the .grid class should be considered deprecated and .o-grid as it's better scoped and is therefor favored.
Responsive columns
Columns stack on smaller viewports and split into thirds on larger breakpoints.
Column 1
Column 2
Column 3
No gutter
Removes spacing between columns for edge-to-edge compositions.
No gutter A
No gutter B
Equal-height elements
Makes column children align to equal heights regardless of content length.
Short content
Longer content to demonstrate equal-height behavior inside grid columns.
Parameters (Blade)
| Key | Default value | Type | Available values | Description |
|---|---|---|---|---|
|
class
|
The base grid class, responsive column classes, and optional grid modifiers. | string | o-grid | o-grid-{1..12}@{breakpoint} | o-grid-auto@{breakpoint} | o-grid-fit@{breakpoint} | o-grid--no-gutter | o-grid--nowrap | o-grid--row-reverse | o-grid--col-reverse | o-grid--equal-elements | - |
|
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 |