Skip to content

Latest commit

 

History

History
88 lines (45 loc) · 3.97 KB

css-grid-systems-roundup.md

File metadata and controls

88 lines (45 loc) · 3.97 KB

CSS Grid Systems Roundup

One thing to note about CSS frameworks is that pretty much all of them include a grid system to layout your page with, and if you don't want to use a CSS framework there are also a number of standalone grid systems that might be useful to you for this purpose. If you're not 100% sure what a grid system is, take a look at:

So why use a grid system? The following quote most succinctly answers this question:

After a few minutes of griddy thinking, the benefits become clear: designers gain a rational, structured framework for organizing content and users gain well-organized, legible sites.

- Fluid Grids by Ethan Marcotte

Grid Systems

Here's a comprehensive roundup of grid systems for you to review and choose from (in alphabetical order), just keep in mind though that in my opinion the best grid system to implement is Susy. Checkout my article "Setting Up Susy" to learn more.

  1. 34Grid
> 34Grid is a Responsive Grid System based on "equally distributed columns" layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)
  1. 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. Columnal
> The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
  1. Frameless
> Dig responsive design? Hate fluid grids? Try a Frameless grid.
  1. Golden Grid System
> A folding grid for responsive design.
  1. Fluid Baseline Grid System
> The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
  1. Responsive GS
> Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.
  1. Responsive Grid System
> The Responsive Grid System isn't a framework. It's not a boilerplate either. It's a quick, easy & flexible way to create a responsive web site.
  1. rwdgrid
> rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays.
  1. SimpleGrid
> Responsive. Infinite nesting. One class per element. Simple.
  1. Gridiculous
> Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required. First and foremost, I wanted to make sure that the grid would work from a large desktop monitor through to a tablet and all the way down to a mobile phone. That's why Gridiculous starts off at 1200px and works itself down to 320px.