Advanced Search

SASS grid generator

/ Published in: Other
Save to your folder(s)
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 column_width is a px value, the column_margin must be a px value. If it's width is a percentage, margin must be a percentage.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. !columns = 8
  2. !column_width = 100px
  3. !column_margin = 10px
  4. !grid_size = !column_width * !columns + (!column_margin * (!columns - 1))
  5.  
  6. // Grid container
  7. #grid
  8.   :width = !grid_size
  9.  
  10. // Columns
  11. .col-1
  12.   :width = !column_width
  13. .col-2
  14.   :width = !column_width * 2 + !column_margin
  15. .col-3
  16.   :width = !column_width * 3 + (!column_margin * 2)
  17. .col-4
  18.   :width = !column_width * 4 + (!column_margin * 3)
  19. .col-5
  20.   :width = !column_width * 5 + (!column_margin * 4)
  21. .col-6
  22.   :width = !column_width * 6 + (!column_margin * 5)
  23. .col-7
  24.   :width = !column_width * 7 + (!column_margin * 6)
  25. .col-8
  26.   :width = !column_width * 8 + (!column_margin * 7)
  27.  
  28. .last
  29.   :margin
  30.     :right 0

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.