10 Really Outstanding and Useful CSS Grid Systems
Grids are an invisible foundation that structure the websites we develop and design. This invisible foundation makes it possible for rapid development, concise code, and a much more organized layout.
Of course you’re not obligated to use a grid, and grid-less websites are fine if the random structure is intended, however, if avoidance of a CSS grid is due to lack of planning, then users will be able to pick up on that at an instant.
Once you’ve defined the elements you’re going to embed into your layout, then experimenting with a variety of grids is encouraged. Simply because experimentation and curiosity will allow you to find out which grid systems work best for you and your projects.
Benefits of Implementing a Grid System
A Grid…
- Gives your design consistency
- Allows flexibility between elements
- Can make your designs more usable and legible
- Reduces CSS coding errors
- For the most part, it eliminates the need for nested HTML tables
- Can be used sort of like a wireframe allowing you to plan
- “Blesses” you with cross-browser support
- Streamlines your development process for future projects
- Acts as an adhesive and encourages the correlation between separate page elements
- Makes it easier to embed images, text, and other visual aesthtics
The Grids
Golden Grid CSS
The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites. This grid system has absolute proportions, structure on the rule of thirds, contains symmetry, asymmetry, usability, accessible typography and more!
960 Grid System
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.
1 KB Grid
The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. As you would expect, there is a class that corresponds to each of the possible column widths, units 1 through 12. The HTML is as minimal as the CSS. Each column contains a class indicating its width. Columns are then contained by a row, which serves to clear the floating columns.
Tripoli Framework
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.
BlueTrip CSS Framework
This grid system is a full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli, 960.gs, and more. BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.
Elastic CSS Framework
Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
Content With Style
The Content With Style CSS Framework has a fixed width layout with a few styles such as 1 content column, vertical navigation, and more. It also gives way to rapid development of websites with pre-written components.
Blueprint CSS Grid System
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.
SenCSS
SenCSS stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. It doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSS do for you? SenCSS does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
YAML Framework
YAML was conceived as a basis for developing flexible layouts, with a strong emphasis on meeting the challenges that result from working with elastic containers and varying units. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples. YAML is oriented to web standards and the demands of accessible web design. A continuously expanding active community has formed around YAML.
Your Turn To Talk
I hope you liked this post! Please take a minute to chime in and leave a comment below. Which CSS Grid system(s) do you use and why do you prefer them over others? ;)
About the author:
Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.
Comments: