This is a basic form of a CSS grid generated via SASS constants and arithmetic. I have expanded on this and created a SASSed version of the Blueprint grid. You can easily expand this out to as many columns as you like. The Blueprint grid operates on a 24 column grid, and scales back from there.
A huge advantage here is that you can use either px, em or percentage and SASS does all the math for you, making completely fluid grids ridiculously easy to accomplish.
Something of note, you can't mix unit types. If the columnwidth is a px value, the columnmargin must be a px value. If it's width is a percentage, margin must be a percentage.
- !columns = 8
- !column_width = 100px
- !column_margin = 10px
- !grid_size = !column_width * !columns + (!column_margin * (!columns - 1))
- // Grid container
- :width = !grid_size
- // Columns
- :width = !column_width
- :width = !column_width * 2 + !column_margin
- :width = !column_width * 3 + (!column_margin * 2)
- :width = !column_width * 4 + (!column_margin * 3)
- :width = !column_width * 5 + (!column_margin * 4)
- :width = !column_width * 6 + (!column_margin * 5)
- :width = !column_width * 7 + (!column_margin * 6)
- :width = !column_width * 8 + (!column_margin * 7)
- :right 0
CommentsSubscribe to comments
You need to login to post a comment.