LESS Griddy - LESS/CSS Dynamic Grid (Toggle Grid Overlay) HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Fully Dynamic Grid Change any of the Grid Variables and LESS will do the math for you and create width, gutter, padding, and border! @columnWidth @gutterWidth @basePadding @borderWidth

.Row Class for Clearing Floats Included in this LESS Grid is a fix for floating our grid classes. It's easy, just apply the class of row on your first grid element. class="row grid4"

Easy Column Addition or Subtraction Don't like having 12 columns? Need 10, 11, 13, 16? No problem, you can make any number of columns; @columnWidth: @baseWidth / 12; to / 16; then copy the math for .grid12 and create new mixins for the # of columns you need

960 px Wrapper 12 Column 10px Gutter default version 1.1 Download

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

Created by Chris Johnson © 2010 - Follow me on Twitter