Gridley Grid Generator – Custom CSS grids for your next web design project


Screen shot 2015-03-24 at 12.01.09 PMImage courtesy of Wikipedia

As a graphic designer I’m often presented with large sets of information that I need to format in an attractive, easy-to-read fashion. To accomplish this I often make use of a grid system. Grids break up the page into multiple sections through the use of evenly spaced, vertical lines.

With the rapid development of web technologies, we can now use grid systems in website designs that use CSS, the formatting language of the web. There are a number of different CSS grid systems that can be found with a quick Google search, but if they don’t match your needs then you need to make one yourself. The process isn’t too complicated, but it takes time and involves a lot of arithmetic that a computer could be doing for you.

I created the Gridley Grid Generator so that you can quickly generate customized CSS grids to fit your needs. Even better, by setting the units field to ‘%’ you can create a responsive grid system that will shrink and grow to fit the user’s screen size.

Need help using your new grid system? Visit for more information.

Find this useful? Check out my CSS Drop-down tutorial

By Paul Hebert, graphic designer