GridleCSS/ɡrɪd.lɛx/

Yet Another Flex Grid framework!

The Grid

auto-xs
auto-xscell-sm-3cell-md-7auto-lg
auto-xs
cell-xs-9cell-sm-7cell-md-5cell-lg-3
auto
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos blanditiis odit et ratione, id laboriosam sapiente consequuntur laborum officia, impedit eligendi natus quisquam dolor in at aliquam, tempore maiores est.

Responsive

Responsive modifiers enable specifing different column sizes, offsets alignment and distribution at certain viewport widths.

cell-xs-5cell-sm-4cell-md-3cell-lg-2
cell-xs-2cell-sm-4cell-md-6cell-lg-8
cell-xs-5cell-sm-4cell-md-3cell-lg-2
cell-xs-3cell-sm-3cell-md-2cell-lg-2
cell-xs-9cell-sm-6cell-md-2cell-lg-2
cell-xscell-sm-3cell-md-8cell-lg

Fluid

Percent based widths allow fluid resizing of columns and rows

cell-12
cell-1
cell-11
cell-2
cell-10
cell-3
cell-9
cell-4
cell-8
cell-5
cell-7
cell-6
cell-6

Offsets

offset-11
offset-10
offset-9
offset-8
offset-7
offset-6
offset-5
offset-4
offset-3
offset-2
offset-1

Offsets by viewport

extra small, no offsetsmall screen offset 2medium screen offset 4large screen offset 6

Gridcellceptional!

A cell, inside a row, inside a cell, inside a row.. ooh you get it!

Auto Width

Add any number of auto sizing cells to a row. Let the grid figure it out

auto
auto
auto
auto
cell-xs-3
auto
cell-xs-2
auto

You can also specify on which viewport the grid should figure it out whether or not it should apply it.

autocell-md-3
auto
autocell-md-2
auto

Alignment

This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

start
center
end

Similar to the above except you can specify the behaviour of how flex-items are laid out along the cross axis, instead of main axix, of the current line.

top
middle
bottom
stretch
baseline
baseline
baseline

You an also specify on what viepoint the grid will apply to alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, reprehenderit ipsum atque distinctio ad, nihil repudiandae ut omnis dignissimos suscipit non quos debitis inventore fuga alias. Quod ut nesciunt aut.

Distribution

Add classes to distribute the contents of a row or column

between
between
between
between
between
around
around
around
around
around
around
around
around
around
around
around
around
around
around
around
between
between
between
between
between

Reversing

1
2
3
4
5
6
7
8
9
10
11
12

Reordering

Add classes to reorder columns.

1
2
3
4