Foundation Zurb

Foundation includes a rock-solid, tested, 12-column grid which is both fluid and responsive. It adapts to different screen sizes through percentage-based widths as well as through media queries. That means you can quickly lay out complex pages without worrying that they won’t show up right on an iPhone, or an Android tablet, or a Blackberry, or a TV. You’ll be able to see exactly how they look, and how they adapt to different sizes, then plan accordingly.

Extra: typography, buttons, tabs, pagination, image grids, forms and more are all included.

{code type=xhtml}

{/code}

Golden Grid System

The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Elastic gutters are created by positioning elements in the center of the gutter (using percentages) and giving them a padding equal to half of the gutter’s width. For example:
{code type=xhtml}

.wrapper {
box-sizing: border-box; /* + vendor prefixes */
width: 50%;
margin-left: 25%;
/* Assuming gutter width = 1.5em */
padding: 0 0.75em;
}

{/code}

Amazium

Amazium uses 4 main media queries to adjust the layout of your website to match the size of your screen. The media queries in Amazium only target at max and min widths rather than device sizes or orientations, which means that any new mobile or browsers that don’t match the exact dimensions will still benefit from the styling.
Made from the 960.gs

{code type=xhtml}

{/code}

Semantic grid system

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?
Runs on LESS, SCSS, or Stylus.

{code type=html}

{/code}

{code type=css}

@column-width: 60;
@gutter-width: 20;
@columns: 12;

header { .column(12); }
article { .column(9); }
aside { .column(3); }

@media (max-device-width: 960px) {
article { .column(12); }
aside { .column(12); }
}

{/code}

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

{code type=html}

{/code}

simplegrid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px.
Most grid systems use one class for all units of a single size, leaving units oblivious to where they fit into the grid. That leaves you with .first and .last classes. With SG each slot knows whether it’s first, middle, or last in its respective row; no extra classes needed.

{code type=html}

Combining Slots to Create Super Slots

Combining slots is as simple as connecting their slot numbers with dashes.

{/code}

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.
It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

{code type=html}

{/code}

Magazin Grid, made for the iPad

{code type=xhtml}

{/code}

1140 css grid

It’s an ultramodern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid. Made for the iPad.

{code type=xhtml}

{/code}

mqframework

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes

{code type=css}
@media only screen and (min-width: 960px) and (max-width: 1139px) {
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
@media print{}
{/code}

{code type=html}

{/code}