Spartan Dynamic Grid Demo
You can manipulate all setup parameters freely, try it out and see how the grid adjusts!get base css get responsive css reset
Note: We use predefined layouts to reorder columns in this example since grid variables are dynamic, this would normally not be necessary.
Responsive Grid Layouts
Resize the browser window to see how layouts adjust throughout viewports.
|M||Medium||< & ≥|
Layout 1: L 33/33/33 | M 50/50 | S 100
Layout 2: L 50/50 | M 100 | S 100
Layout 3: L 66/33 | M 66/33 | S 100
Layout 4: L 25/25/25/25 | M 50/50 | S 100
Thanks to a fully flexible grid setup you can even create a twitter bootstrap grid behaviour.
Simple nested Columns
Responsive Layout 3 with simple Columns inside
Responsive Layout 2 with the previous Layout nested
Since everything inside the mixins gets calculated with given (floating point) numbers you can actually set any width through them. (That's why the above responsive layouts work the same with every column amount)