Different Responsive Grid Systems

These are just basic examples of column usage. The total line count given is reflective of the styles needed to display the full spectrum of column sizes for each screen size breakpoint and any modifiers used in the examples below. It is not 100% accurate to each framework as a whole.

Bootstrap(332 lines of CSS)

halves

col-xs-6
col-xs-6

thirds-uneven

col-xs-4
col-xs-8

quarters-uneven

col-xs-3
col-xs-9

thirds-even

col-xs-4
col-xs-4
col-xs-4

offset

col-xs-4
col-xs-4 col-xs-offset-4

incomplete

col-xs-4
col-xs-4

wrapped

col-xs-4
col-xs-4
col-xs-6

UI Kit(764 lines of CSS)

halves

uk-width-1-2
uk-width-1-2

thirds-uneven

uk-width-1-3
uk-width-2-3

quarters-uneven

uk-width-1-4
uk-width-3-4

thirds-even

uk-width-1-3
uk-width-1-3
uk-width-1-3

offset

uk-width-1-3
uk-width-1-3 uk-pull-1-3

incomplete

uk-width-1-3
uk-width-1-3

wrapped

uk-width-1-3
uk-width-1-3
uk-width-1-2

Foundation(313 lines of CSS)

halves

columns small-6
columns small-6

thirds-uneven

columns small-4
columns small-8

quarters-uneven

columns small-3
columns small-9

thirds-even

columns small-4
columns small-4
columns small-4

offset

columns small-4
columns small-4

incomplete

columns small-4
columns small-4 end

wrapped

columns small-4
columns small-4
columns small-6

Custom Built Flexbox Grid(142 lines of CSS)

halves

column-1-2
column

thirds-uneven

column-1-3
column

quarters-uneven

column-1-4
column

thirds-even

column-1-3
column-1-3
column-1-3

offset

column-1-3
column-1-3

justified (row class)

column-1-3
column-1-3

incomplete

column-1-3
column-1-3

no-wrap

column-1-3
column-1-3
column-1-2

wrapped (row class)

column-1-3
column-1-3
column-1-2