Skip to content


This page lists all Grids CSS custom properties and utility classes available in the OxyProps Framework

Basic Grids

link Basic Grids
DescriptionCSS VariableUtility 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

Grid Auto Flow

link Grid Auto Flow
DescriptionUtility 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

Asymetrical Grids

link Asymetrical Grids
DescriptionCSS VariableUtility 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

Breakpoints Grid Mofifiers

link Breakpoints Grid Mofifiers
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
DescriptionUtility Class
First o-first
Last o-last
# CellsColumns spanRow 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
# OffsetStart columnStart 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

Breakpoints Column Span Modifiers

link Breakpoints Column Span Modifiers
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

Breakpoints Row Span Modifiers

link Breakpoints Row Span Modifiers
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

Breakpoints Column Start Modifiers

link Breakpoints Column Start Modifiers
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

Breakpoints Row Start Modifiers

link Breakpoints Row Start Modifiers
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