Funko
Grid System

documentation

source

demo


minimal syntax

just add class name 'row' to a container, and let flex box handle it. If you want precise control, use the familiar 12 column system.

element light

cells can be rows themselves, with cells of their own. no unnecessary elements / nesting.

responsive

break points for mobile, tablet and desktop. Add class name 'small-n', 'medium-n' or 'large-n'.

equal column heights

no javascript hackery, just good clean fun.

Gutters

no gutter

 
 
 
 
 

small gutter

 
 
 
 
 

medium gutter

 
 
 
 
 

large gutter

 
 
 
 
 

Grid System

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

utilities

.hide-for-[breakpoint], .show-for-[breakpoint]

this is not visible on small
this is not visible on medium
this is not visible on large
this is only visible on small
this is only visible on medium
this is only visible on large

.order-[breakpoint]-[1...12]

large: first
medium: second
small: third
large: second
medium: third
small: first
large: third
medium: first
small: second