Basic Grids
OxyProps offers a set of basic pre-made grids to create popular layouts.
Simple Grids
Do you need to quickly create a defined number of columns with equal widths ? Use o-grid-{1-12} to create it.
o-grid-2
a card
a card
o-grid-3
a card
a card
a card
o-grid-4
a card
a card
a card
a card
o-grid-5
a card
a card
a card
a card
a card
o-grid-6
a card
a card
a card
a card
a card
a card
o-grid-7
a card
a card
a card
a card
a card
a card
a card
o-grid-8
a card
a card
a card
a card
a card
a card
a card
a card
o-grid-9
a card
a card
a card
a card
a card
a card
a card
a card
a card
o-grid-10
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
o-grid-11
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
o-grid-12
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
a card
Asymetrical Grids
Often to give rythm to your design, you need two columns with different widths. Use o-grid-{1-3}-{1-3} to define such a layout.
o-grid-1-3
a card
a card
o-grid-3-1
a card
a card
o-grid-1-2
a card
a card
o-grid-2-1
a card
a card
o-grid-2-3
a card
a card
o-grid-3-2
a card
a card
Media Queries
Your can add a breakpoint to each of these grid classes to specify aa which screen size it applies. Use o-{breakpoint}-grid-{1-12} .
Available breakpoints : xxs, xs, sm, md, lg, xl, xxl.
o-grid-6
o-lg-grid-3
o-sm-grid-1
a card
a card
a card
a card
a card
a card