ZURB CSS Grid Builder

At ZURB we use a flexible grid framework that lets us rapidly prototype and implement sites. Recently we'd been creating some variant grids for different widths and gutter sizes so we thought, 'why not just create grids on the fly with a simple tool?' And look: here it is, free to use for your own projects, client work, whatever you'd like. If you want to tell people how awesome this grid builder is, hey, we won't stop you.

Let's not get crazy here. No more than 16. Nice try, smartass. Numbers only, dude.
Get the Code!

Container width: 940

CSS Code

  1. /* --------------------------------------------------
  2. Container
  3. -------------------------------------------------- */
  4. div#container, div.container { position: relative; width: 940px; margin: 0 auto; padding: 0; }
  5.  
  6.  
  7. /* --------------------------------------------------
  8. Grid
  9. -------------------------------------------------- */
  10. .column-row, .row { margin: 0 0 18px -20px; }
  11. .column, .columns { float: left; display: inline; margin: 0 0 0 20px; }
  12.  
  13. .one { width: 60px; }
  14. .two { width: 140px; }
  15. .three { width: 220px; }
  16. .four { width: 300px; }
  17. .five { width: 380px; }
  18. .six { width: 460px; }
  19. .seven { width: 540px; }
  20. .eight { width: 620px; }
  21. .nine { width: 700px; }
  22. .ten { width: 780px; }
  23. .eleven { width: 860px; }
  24. .twelve { width: 940px; }
  25.  
  26. .offset-by-one-half { margin-left: 40px; }
  27. .offset-by-one { margin-left: 80px; }
  28. .offset-by-two { margin-left: 160px; }
  29. .offset-by-three { margin-left: 240px; }
  30. .offset-by-four { margin-left: 320px; }
  31. .offset-by-five { margin-left: 400px; }
  32. .offset-by-six { margin-left: 480px; }
  33. .offset-by-seven { margin-left: 560px; }
  34. .offset-by-eight { margin-left: 640px; }
  35. .offset-by-nine { margin-left: 720px; }
  36. .offset-by-ten { margin-left: 800px; }
  37.  
  38. /* Clear the columns automagically, thanks @kneath */
  39. .column-row:after, .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  40. * html .column-row, * html .row, * html .clearfix { height: 1%; }
  41. .column-row, .row, .clearfix { display: inline-block; }
  42. .column-row, .row, .clearfix { display: block; }
  43.  
  44. /* IE6 Problems ---------- */
  45. body.ie .column-row { width: 960px; }
  46. body.ie .eight .column-row { width: 640px; }
  47. body.ie .nine .column-row { width: 720px; }
  48. body.ie .ten .column-row { width: 800px; }
  49. body.ie .eleven .column-row { width: 880px; }
  50. body.ie .two-thirds .column-row { width: 640px; }

Check out other Playground experiments

Grid examples thumb

Foundation CSS Grid Examples
Rocket thumb

Foundation CSS Grid + Container Queries
Grids thumb

Foundation Grids within Grids
Bg tile reactive

Reactive Animation Listener
Startup playground

ZURB

ZURB is a product design company since 1998. Through consulting, product design tools and training, we transform the way businesses approach product design.

Want more?

Talk to us

Call us at (408) 341-0600

Not a big talker? Email us at [email protected]

Stay in touch

Get monthly updates from ZURB in your inbox. Read our latest news & buzz.

Get ZURBnews!

© 1998–2020 ZURB, Inc. All rights reserved.

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×