I've recently been doing more and more cutting from mocks to HTML & CSS and one particular job required me to work to a specific grid layout.
In working to these grid layouts, I've created a couple of tools to make generating and working with the grids a little easier.
UK EVENTAttend ffconf.org 2024
The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!
£249+VAT - reserve your place today
Generating the Grid
There's a few tools for generating PSDs and calculations for grid, but since I'm a real lazy guy - I actually want something to generate the CSS for me.
I use 29digital's grid calculator to work out the details of the grid. Then once the right grid is configured, I'll use the following bookmarklet to generate the CSS required:
This gives me a CSS grid layout such as the following for a 6 column 66px wide grid layout with 14px gutter:
.column { margin: 0 14px 14px 0; float: left; }
.last { margin: 0 0 14px 0; }
.span1 { width: 66px; }
.span2 { width: 146px; }
.span3 { width: 226px; }
.span4 { width: 306px; }
.span5 { width: 386px; }
.span6 { width: 466px; }Working with the Grid
The next step I'll take when working up the markup, is to include the code from ctrl+shift+g.
The default way of interacting with this code is to use ctrl+shift+g - but this triggers the find function both in Safari and Firefox 3 - and in Firefox it triggers the grid and find at once, then you're stuck in the find box not being able turn the grid back off easily.
So, another little bookmarklet to toggle the grid:
All simple stuff, but makes getting a simple grid layout working quicker and easier for the lazy developer :-)