Aller au contenu

Grids

Ce contenu n’est pas encore disponible dans votre langue.

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
#xxsxssmmdlgxlxxl
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
#xxsxssmmdlgxlxxl
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
#xxsxssmmdlgxlxxl
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
#xxsxssmmdlgxlxxl
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
#xxsxssmmdlgxlxxl
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