: Is it possible to determine how many columns a web design grid has? So I'm doing this lynda.com HTML/CSS task and it asked me to take my favourite web design, determine how many columns the

@Berryessa866

There are a few issues here.


Not everyone uses a grid system and even if they do there's no guarantee the grids are consistent. Maybe your example uses a four column grid with a wider left column.
Grids are a tool. A guideline. They don't necessarily mean you are bound to your grid 100% of the time. Often, if people are designing using a pre-baked framework that uses a set grid system, they will stick to the grids available to them—but that's not guaranteed. I make my own grid systems and I often break out of those grids.
If the design was initially made in Photoshop or similar using a grid but coded without the use of a framework or explicit CSS grid system it may be impossible to tell what grid system was used without seeing the Photoshop file.


The most common grid system used on the web (from what I've seen) is probably a 12 column grid, maybe followed by 16 columns. So although it may look like 4 columns, it's more likely actually based on a larger number of columns—each column being made up of a number of the smaller columns. Say 10 columns broken down in to 4 columns as 4-2-2-2.

As for it being hard to see the grid being used—it comes with practice. The more you use grids and the more you see grids being used, the more you will recognise them.

It wasn't easy to see a solid grid system in your example image so I had a quick look and it seems the smallest number of columns I could make fit was 21—with gutters wider than the actual columns!* It's also worth mentioning that it is 1200px wide not 960px—which you can see easily enough by opening it in an image editor.



*Quick tip: I did this by opening the image in Illustrator, drawing a semi-transparent rectangle over the content area and using the Split into Grid function and changing the number of columns until they fit.

Vote Up Vote Down