This page lists all Grids CSS custom properties and utility classes available in the OxyProps Framework
| Description | CSS Variable | Utility Class |
|---|
| 1 column grid. | --o-grid-columns-1 | o-grid-1 |
| 2 column grid. | --o-grid-columns-2 | o-grid-2 |
| 3 column grid. | --o-grid-columns-3 | o-grid-3 |
| 4 column grid. | --o-grid-columns-4 | o-grid-4 |
| 5 column grid. | --o-grid-columns-5 | o-grid-5 |
| 6 column grid. | --o-grid-columns-6 | o-grid-6 |
| 7 column grid. | --o-grid-columns-7 | o-grid-7 |
| 8 column grid. | --o-grid-columns-8 | o-grid-8 |
| 9 column grid. | --o-grid-columns-9 | o-grid-9 |
| 10 column grid. | --o-grid-columns-10 | o-grid-10 |
| 11 column grid. | --o-grid-columns-11 | o-grid-11 |
| 12 column grid. | --o-grid-columns-12 | o-grid-12 |
| Description | Utility Class |
|---|
| Flow Row | o-grid-flow-row |
| Flow Column | o-grid-flow-column |
| Flow Row Dense | o-grid-flow-row-dense |
| Flow Column Dense | o-grid-flow-column-dense |
| Flow Dense | o-grid-flow-dense |
| Description | CSS Variable | Utility Class |
|---|
| 1-2 asymetrical 2 columns grid. | --o-grid-columns-1-2 | o-grid-1-2 |
| 1-3 asymetrical 2 columns grid. | --o-grid-columns-1-3 | o-grid-1-3 |
| 1-4 asymetrical 2 columns grid. | --o-grid-columns-1-4 | o-grid-1-4 |
| 1-5 asymetrical 2 columns grid. | --o-grid-columns-1-5 | o-grid-1-5 |
| 2-1 asymetrical 2 columns grid. | --o-grid-columns-2-1 | o-grid-2-1 |
| 2-3 asymetrical 2 columns grid. | --o-grid-columns-2-3 | o-grid-2-3 |
| 2-4 asymetrical 2 columns grid. | --o-grid-columns-2-4 | o-grid-2-4 |
| 2-5 asymetrical 2 columns grid. | --o-grid-columns-2-5 | o-grid-2-5 |
| 3-1 asymetrical 2 columns grid. | --o-grid-columns-3-1 | o-grid-3-1 |
| 3-2 asymetrical 2 columns grid. | --o-grid-columns-3-2 | o-grid-3-2 |
| 3-4 asymetrical 2 columns grid. | --o-grid-columns-3-4 | o-grid-3-4 |
| 3-5 asymetrical 2 columns grid. | --o-grid-columns-3-5 | o-grid-3-5 |
| 4-1 asymetrical 2 columns grid. | --o-grid-columns-4-1 | o-grid-4-1 |
| 4-2 asymetrical 2 columns grid. | --o-grid-columns-4-2 | o-grid-4-2 |
| 4-3 asymetrical 2 columns grid. | --o-grid-columns-4-3 | o-grid-4-3 |
| 4-5 asymetrical 2 columns grid. | --o-grid-columns-4-5 | o-grid-4-5 |
| 5-1 asymetrical 2 columns grid. | --o-grid-columns-5-1 | o-grid-5-1 |
| 5-2 asymetrical 2 columns grid. | --o-grid-columns-5-2 | o-grid-5-2 |
| 5-3 asymetrical 2 columns grid. | --o-grid-columns-5-3 | o-grid-5-3 |
| 5-4 asymetrical 2 columns grid. | --o-grid-columns-5-4 | o-grid-5-4 |
| # | xxs | xs | sm | md | lg | xl | xxl |
|---|
| 1 | o-xxs-grid-1 | o-xs-grid-1 | o-sm-grid-1 | o-md-grid-1 | o-lg-grid-1 | o-xl-grid-1 | o-xxl-grid-1 |
| 2 | o-xxs-grid-2 | o-xs-grid-2 | o-sm-grid-2 | o-md-grid-2 | o-lg-grid-2 | o-xl-grid-2 | o-xxl-grid-2 |
| 3 | o-xxs-grid-3 | o-xs-grid-3 | o-sm-grid-3 | o-md-grid-3 | o-lg-grid-3 | o-xl-grid-3 | o-xxl-grid-3 |
| 4 | o-xxs-grid-4 | o-xs-grid-4 | o-sm-grid-4 | o-md-grid-4 | o-lg-grid-4 | o-xl-grid-4 | o-xxl-grid-4 |
| 5 | o-xxs-grid-5 | o-xs-grid-5 | o-sm-grid-5 | o-md-grid-5 | o-lg-grid-5 | o-xl-grid-5 | o-xxl-grid-5 |
| 6 | o-xxs-grid-6 | o-xs-grid-6 | o-sm-grid-6 | o-md-grid-6 | o-lg-grid-6 | o-xl-grid-6 | o-xxl-grid-6 |
| 7 | o-xxs-grid-7 | o-xs-grid-7 | o-sm-grid-7 | o-md-grid-7 | o-lg-grid-7 | o-xl-grid-7 | o-xxl-grid-7 |
| 8 | o-xxs-grid-8 | o-xs-grid-8 | o-sm-grid-8 | o-md-grid-8 | o-lg-grid-8 | o-xl-grid-8 | o-xxl-grid-8 |
| 9 | o-xxs-grid-9 | o-xs-grid-9 | o-sm-grid-9 | o-md-grid-9 | o-lg-grid-9 | o-xl-grid-9 | o-xxl-grid-9 |
| 10 | o-xxs-grid-10 | o-xs-grid-10 | o-sm-grid-10 | o-md-grid-10 | o-lg-grid-10 | o-xl-grid-10 | o-xxl-grid-10 |
| 11 | o-xxs-grid-11 | o-xs-grid-11 | o-sm-grid-11 | o-md-grid-11 | o-lg-grid-11 | o-xl-grid-11 | o-xxl-grid-11 |
| 12 | o-xxs-grid-12 | o-xs-grid-12 | o-sm-grid-12 | o-md-grid-12 | o-lg-grid-12 | o-xl-grid-12 | o-xxl-grid-12 |
| Description | Utility Class |
|---|
| First | o-first |
| Last | o-last |
| # Cells | Columns span | Row span |
|---|
| 1 | o-span-1 | o-rspan-1 |
| 2 | o-span-2 | o-rspan-2 |
| 3 | o-span-3 | o-rspan-3 |
| 4 | o-span-4 | o-rspan-4 |
| 5 | o-span-5 | o-rspan-5 |
| 6 | o-span-6 | o-rspan-6 |
| 7 | o-span-7 | o-rspan-7 |
| 8 | o-span-8 | o-rspan-8 |
| 9 | o-span-9 | o-rspan-9 |
| 10 | o-span-10 | o-rspan-10 |
| 11 | o-span-11 | o-rspan-11 |
| 12 | o-span-12 | o-rspan-12 |
| # Offset | Start column | Start row |
|---|
| 1 | o-start-1 | o-rstart-1 |
| 2 | o-start-2 | o-rstart-2 |
| 3 | o-start-3 | o-rstart-3 |
| 4 | o-start-4 | o-rstart-4 |
| 5 | o-start-5 | o-rstart-5 |
| 6 | o-start-6 | o-rstart-6 |
| 7 | o-start-7 | o-rstart-7 |
| 8 | o-start-8 | o-rstart-8 |
| 9 | o-start-9 | o-rstart-9 |
| 10 | o-start-10 | o-rstart-10 |
| 11 | o-start-11 | o-rstart-11 |
| 12 | o-start-12 | o-rstart-12 |
| # | xxs | xs | sm | md | lg | xl | xxl |
|---|
| 1 | o-xxs-span-1 | o-xs-span-1 | o-sm-span-1 | o-md-span-1 | o-lg-span-1 | o-xl-span-1 | o-xxl-span-1 |
| 2 | o-xxs-span-2 | o-xs-span-2 | o-sm-span-2 | o-md-span-2 | o-lg-span-2 | o-xl-span-2 | o-xxl-span-2 |
| 3 | o-xxs-span-3 | o-xs-span-3 | o-sm-span-3 | o-md-span-3 | o-lg-span-3 | o-xl-span-3 | o-xxl-span-3 |
| 4 | o-xxs-span-4 | o-xs-span-4 | o-sm-span-4 | o-md-span-4 | o-lg-span-4 | o-xl-span-4 | o-xxl-span-4 |
| 5 | o-xxs-span-5 | o-xs-span-5 | o-sm-span-5 | o-md-span-5 | o-lg-span-5 | o-xl-span-5 | o-xxl-span-5 |
| 6 | o-xxs-span-6 | o-xs-span-6 | o-sm-span-6 | o-md-span-6 | o-lg-span-6 | o-xl-span-6 | o-xxl-span-6 |
| 7 | o-xxs-span-7 | o-xs-span-7 | o-sm-span-7 | o-md-span-7 | o-lg-span-7 | o-xl-span-7 | o-xxl-span-7 |
| 8 | o-xxs-span-8 | o-xs-span-8 | o-sm-span-8 | o-md-span-8 | o-lg-span-8 | o-xl-span-8 | o-xxl-span-8 |
| 9 | o-xxs-span-9 | o-xs-span-9 | o-sm-span-9 | o-md-span-9 | o-lg-span-9 | o-xl-span-9 | o-xxl-span-9 |
| 10 | o-xxs-span-10 | o-xs-span-10 | o-sm-span-10 | o-md-span-10 | o-lg-span-10 | o-xl-span-10 | o-xxl-span-10 |
| 11 | o-xxs-span-11 | o-xs-span-11 | o-sm-span-11 | o-md-span-11 | o-lg-span-11 | o-xl-span-11 | o-xxl-span-11 |
| 12 | o-xxs-span-12 | o-xs-span-12 | o-sm-span-12 | o-md-span-12 | o-lg-span-12 | o-xl-span-12 | o-xxl-span-12 |
| # | xxs | xs | sm | md | lg | xl | xxl |
|---|
| 1 | o-xxs-rspan-1 | o-xs-rspan-1 | o-sm-rspan-1 | o-md-rspan-1 | o-lg-rspan-1 | o-xl-rspan-1 | o-xxl-rspan-1 |
| 2 | o-xxs-rspan-2 | o-xs-rspan-2 | o-sm-rspan-2 | o-md-rspan-2 | o-lg-rspan-2 | o-xl-rspan-2 | o-xxl-rspan-2 |
| 3 | o-xxs-rspan-3 | o-xs-rspan-3 | o-sm-rspan-3 | o-md-rspan-3 | o-lg-rspan-3 | o-xl-rspan-3 | o-xxl-rspan-3 |
| 4 | o-xxs-rspan-4 | o-xs-rspan-4 | o-sm-rspan-4 | o-md-rspan-4 | o-lg-rspan-4 | o-xl-rspan-4 | o-xxl-rspan-4 |
| 5 | o-xxs-rspan-5 | o-xs-rspan-5 | o-sm-rspan-5 | o-md-rspan-5 | o-lg-rspan-5 | o-xl-rspan-5 | o-xxl-rspan-5 |
| 6 | o-xxs-rspan-6 | o-xs-rspan-6 | o-sm-rspan-6 | o-md-rspan-6 | o-lg-rspan-6 | o-xl-rspan-6 | o-xxl-rspan-6 |
| 7 | o-xxs-rspan-7 | o-xs-rspan-7 | o-sm-rspan-7 | o-md-rspan-7 | o-lg-rspan-7 | o-xl-rspan-7 | o-xxl-rspan-7 |
| 8 | o-xxs-rspan-8 | o-xs-rspan-8 | o-sm-rspan-8 | o-md-rspan-8 | o-lg-rspan-8 | o-xl-rspan-8 | o-xxl-rspan-8 |
| 9 | o-xxs-rspan-9 | o-xs-rspan-9 | o-sm-rspan-9 | o-md-rspan-9 | o-lg-rspan-9 | o-xl-rspan-9 | o-xxl-rspan-9 |
| 10 | o-xxs-rspan-10 | o-xs-rspan-10 | o-sm-rspan-10 | o-md-rspan-10 | o-lg-rspan-10 | o-xl-rspan-10 | o-xxl-rspan-10 |
| 11 | o-xxs-rspan-11 | o-xs-rspan-11 | o-sm-rspan-11 | o-md-rspan-11 | o-lg-rspan-11 | o-xl-rspan-11 | o-xxl-rspan-11 |
| 12 | o-xxs-rspan-12 | o-xs-rspan-12 | o-sm-rspan-12 | o-md-rspan-12 | o-lg-rspan-12 | o-xl-rspan-12 | o-xxl-rspan-12 |
| # | xxs | xs | sm | md | lg | xl | xxl |
|---|
| 1 | o-xxs-start-1 | o-xs-start-1 | o-sm-start-1 | o-md-start-1 | o-lg-start-1 | o-xl-start-1 | o-xxl-start-1 |
| 2 | o-xxs-start-2 | o-xs-start-2 | o-sm-start-2 | o-md-start-2 | o-lg-start-2 | o-xl-start-2 | o-xxl-start-2 |
| 3 | o-xxs-start-3 | o-xs-start-3 | o-sm-start-3 | o-md-start-3 | o-lg-start-3 | o-xl-start-3 | o-xxl-start-3 |
| 4 | o-xxs-start-4 | o-xs-start-4 | o-sm-start-4 | o-md-start-4 | o-lg-start-4 | o-xl-start-4 | o-xxl-start-4 |
| 5 | o-xxs-start-5 | o-xs-start-5 | o-sm-start-5 | o-md-start-5 | o-lg-start-5 | o-xl-start-5 | o-xxl-start-5 |
| 6 | o-xxs-start-6 | o-xs-start-6 | o-sm-start-6 | o-md-start-6 | o-lg-start-6 | o-xl-start-6 | o-xxl-start-6 |
| 7 | o-xxs-start-7 | o-xs-start-7 | o-sm-start-7 | o-md-start-7 | o-lg-start-7 | o-xl-start-7 | o-xxl-start-7 |
| 8 | o-xxs-start-8 | o-xs-start-8 | o-sm-start-8 | o-md-start-8 | o-lg-start-8 | o-xl-start-8 | o-xxl-start-8 |
| 9 | o-xxs-start-9 | o-xs-start-9 | o-sm-start-9 | o-md-start-9 | o-lg-start-9 | o-xl-start-9 | o-xxl-start-9 |
| 10 | o-xxs-start-10 | o-xs-start-10 | o-sm-start-10 | o-md-start-10 | o-lg-start-10 | o-xl-start-10 | o-xxl-start-10 |
| 11 | o-xxs-start-11 | o-xs-start-11 | o-sm-start-11 | o-md-start-11 | o-lg-start-11 | o-xl-start-11 | o-xxl-start-11 |
| 12 | o-xxs-start-12 | o-xs-start-12 | o-sm-start-12 | o-md-start-12 | o-lg-start-12 | o-xl-start-12 | o-xxl-start-12 |
| # | xxs | xs | sm | md | lg | xl | xxl |
|---|
| 1 | o-xxs-rstart-1 | o-xs-rstart-1 | o-sm-rstart-1 | o-md-rstart-1 | o-lg-rstart-1 | o-xl-rstart-1 | o-xxl-rstart-1 |
| 2 | o-xxs-rstart-2 | o-xs-rstart-2 | o-sm-rstart-2 | o-md-rstart-2 | o-lg-rstart-2 | o-xl-rstart-2 | o-xxl-rstart-2 |
| 3 | o-xxs-rstart-3 | o-xs-rstart-3 | o-sm-rstart-3 | o-md-rstart-3 | o-lg-rstart-3 | o-xl-rstart-3 | o-xxl-rstart-3 |
| 4 | o-xxs-rstart-4 | o-xs-rstart-4 | o-sm-rstart-4 | o-md-rstart-4 | o-lg-rstart-4 | o-xl-rstart-4 | o-xxl-rstart-4 |
| 5 | o-xxs-rstart-5 | o-xs-rstart-5 | o-sm-rstart-5 | o-md-rstart-5 | o-lg-rstart-5 | o-xl-rstart-5 | o-xxl-rstart-5 |
| 6 | o-xxs-rstart-6 | o-xs-rstart-6 | o-sm-rstart-6 | o-md-rstart-6 | o-lg-rstart-6 | o-xl-rstart-6 | o-xxl-rstart-6 |
| 7 | o-xxs-rstart-7 | o-xs-rstart-7 | o-sm-rstart-7 | o-md-rstart-7 | o-lg-rstart-7 | o-xl-rstart-7 | o-xxl-rstart-7 |
| 8 | o-xxs-rstart-8 | o-xs-rstart-8 | o-sm-rstart-8 | o-md-rstart-8 | o-lg-rstart-8 | o-xl-rstart-8 | o-xxl-rstart-8 |
| 9 | o-xxs-rstart-9 | o-xs-rstart-9 | o-sm-rstart-9 | o-md-rstart-9 | o-lg-rstart-9 | o-xl-rstart-9 | o-xxl-rstart-9 |
| 10 | o-xxs-rstart-10 | o-xs-rstart-10 | o-sm-rstart-10 | o-md-rstart-10 | o-lg-rstart-10 | o-xl-rstart-10 | o-xxl-rstart-10 |
| 11 | o-xxs-rstart-11 | o-xs-rstart-11 | o-sm-rstart-11 | o-md-rstart-11 | o-lg-rstart-11 | o-xl-rstart-11 | o-xxl-rstart-11 |
| 12 | o-xxs-rstart-12 | o-xs-rstart-12 | o-sm-rstart-12 | o-md-rstart-12 | o-lg-rstart-12 | o-xl-rstart-12 | o-xxl-rstart-12 |