: How do I decide how many columns to use in my grid? I'm trying to create a UI design for my 1024x768 screen. I know there's a grid system out there. I've read about the benefits, etc.

@Shelley591

CSS grids are great if you are using them to base you wireframes and visual design off of.

If, however, your visual design and wireframes are already completed, an off-the-shelf Grid system is likely more of a headache than a help.

If you're design is complete, there's no need to force it into a particular concept of a grid system. If it's a two column design, just go with a 2 column grid. No need to maintain the CSS for 12 grids in this particular case.

Vote Up Vote Down

@Voss6371140

The other two great answers cover most of the applicability, so here's a little about grids in general, hope it helps.

Grids are a great wat to distribute content in a way that looks good and/or helps readability. The advantage of a consistent layout versus an inconsistent one (just talking about space distribution) is that information will appear in blocks, and these blocks help understand the site better.

How many columns and blocks you use will depend on your information. For example, this site uses mainly two columns. It doesn't really need more, you have the main content in the left one and the categories, additional information, tags and all that in the right. The main column uses, however, a vertical grid, so to say. All questions have more or less the same height. If they all had very different ones, you'd probably have some issues determining where they begin and end (text styles help). While some pages (Smashing Magazine, just because it's the first that came into my mind and because it is simply amazing) uses multiple columns. They want to show different types of information, with different hierarchies. Smashing is a great example of grids helping responsiveness (how the page adapts to different devices and browser sizes).

So, in short, grids organise information. They are great if, as I mentioned right above, you want to design sites that are cross-device and cross-browser. They simplify the process, the calculations. And, they add a little math to the layout, thus the results look better because there is mathematical beauty behind it :)

Vote Up Vote Down

@Frith110

Your best bet is to find a GS that works with your project at hand. There's tons of them out there: 960gs, Bootstrap, Foundation etc. You want to develop your website based on the parameters of your chosen GS. Most of these GS come with their own set of parameters and guidelines, the grids themselves also vary in column width, gutter width, and outside margins.

My team and I have been working pretty heavily with both Twitter Bootstrap and Foundation, they're reliable, do a great job of fitting modern browser requirements, and are fully responsive systems. This allows you to manage your UI/UX for various viewports and truly give your user a seamless experience.

You can find these Grid Systems here:
960.gs/ twitter.github.com/bootstrap/
In terms of getting a Grid, some of these systems come with grids you can download from their site, however an extension we use is GuideGuide, it's a plug-in for photoshop that allows you to create extremely accurate grids with photoshops guidelines. I'd link you directly to it, however this platform won't allow me to link beyond 2. Google Search 'GuideGuide'

Vote Up Vote Down

@Speyer780

Do some rough sketches of your site on paper and see how the information falls. Some layouts lend themselves more easily to one-third/two-thirds (so a 12-column) or quarters (16-column). Give yourself permission to mess around a little and try something which might fail.

Vote Up Vote Down