CSS Grid Systems

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

If you take the time to learn how to work with these CSS frameworks, it will provide for a better programming experience with modern and appealing visual results while giving you a foundation and guidelines to start from. It allows for a efficient way of guiding the user through the page content and an easier manage experience.

So here are 4 of the most famous grid-systems you can use:

1. 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.

2. Blueprint

- homepage
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

3. “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.

4. 960 Grid System

- homepage
The 960 Grid System is an effort to streamline 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 a modern webdesigner life and so comes CSS grid oriented layouts that allow for a balanced and solid structure of the website layout.
Let’s state some beneficts:

• Coherence Between Visual Elements
• No Nested HTML Tables
• Cross-browser support (oh yeah!)
• Time Saving (no CSS from scratch, you have a foundation!)
• Easier to manage
• Enhanced and modern visual experience

Plus, when you use CSS grid frameworks, the user browser loads the CSS file only once and keeps it cached.

For more links to articles, tools and tutorials about grid systems, visit: Designing With Grid-Based Approach (@smashingmagazine)