4 CSS Grid Systems and Why.

July 12, 2009 · 7 comments

CSS Grid Systems

Following our last CSS-related post, we decided to talk about CSS grid systems and the reasons designers use them.

CSS frameworks help provide a better programming experience, making it easier to create appealing visual effects. CSS frameworks offer an efficient way for guiding the user through page content, and make managing your pages easier.

Here are four of the most common CSS grid systems:

YUI Grids CSS

- homepage
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

Blueprint

- homepage
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation for building your project, sensible typography, useful plugins, and even a style sheet for printing.

“Yet Another Multicolumn Layout” (YAML)

- homepage
“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

960 Grid System

- homepage
The 960 Grid System streamlines web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Why?

HTML tables are almost dead in today’s design. CSS grid-oriented layouts allow for a balanced and solid structure of the website layout, making design easier and more efficient.
Some benefits: