GRID MAKER

Question: If anyone knows how to get the baseline of large text to line up perfectly in both Firefox and Safari, please let me know at kr@xph.us. Thanks!

GRID IMAGE URL

HOW MANY COLUMNS

EXAMPLE CSS

  • vivamus
  • vitae
  • diam

Lorem Ipsum

Quisque posuere, eros suscipit ornare elementum, pede neque aliquet mi, vel ullamcorper nisi quam ac lacus. Nunc posuere iaculis augue. Suspendisse eget tortor. Maecenas sed massa quis lectus aliquet facilisis. Quisque arcu. Suspendisse rutrum. Donec eleifend nibh a arcu consectetur iaculis. Nullam vel ligula. Nulla bibendum congue tortor. Aliquam lobortis dolor ut odio. Nullam porta porta urna. Suspendisse posuere enim. Vestibulum interdum. Pellentesque sit amet nunc. Quisque lacinia porta ante. Ut id lectus nec mi sollicitudin porttitor. Nulla facilisi.

  • vivamus
  • vitae
  • diam

Lorem Ipsum

Quisque posuere, eros suscipit ornare elementum, pede neque aliquet mi, vel ullamcorper nisi quam ac lacus. Nunc posuere iaculis augue. Suspendisse eget tortor. Maecenas sed massa quis lectus aliquet facilisis. Quisque arcu. Suspendisse rutrum. Donec eleifend nibh a arcu consectetur iaculis. Nullam vel ligula. Nulla bibendum congue tortor. Aliquam lobortis dolor ut odio. Nullam porta porta urna. Suspendisse posuere enim. Vestibulum interdum. Pellentesque sit amet nunc. Quisque lacinia porta ante. Ut id lectus nec mi sollicitudin porttitor. Nulla facilisi.

ABOUT

This is a quick hack to make those background images such as the ones you see on http://www.subtraction.com/2004/12/31/grid-computi and http://www.thegridsystem.org/. I've recently been reading about grid systems in web design, and I'm trying to teach myself the fundamentals. But I discovered that, especially when you want to experiment with lots of variations, drawing such a background image is time-consuming. Or maybe I just have no photoshop skills.

Anyway, I made this tool for myself and those like me, who want an easy way to make grid-system background images.

The grid-maker source code lives on github.

Visit http://xph.us/software to see my other work.