Popular CSS Grids

Grids.md

Most popular CSS grids as of February 2015

Bootstrap

• Stars: 77643
• Columns: 12 by default
• Syntax: "row", "col-md-1", "col-xs-12 col-md-8"

Foundation

• Stars: 19381
• Columns: 12
• Syntax: "row", "small-6 large-2 columns", "large-6 columns"
• Remarks: same principle as Bootstrap, different syntax

Ionic

• Stars: 13563
• Columns: unlimited
• Syntax: "row", "col", "col col-33"
• Remarks: uses flexbox (the targeted devices all support flexbox), "col-*" in %

Pure.css

• Stars: 10514
• Columns: 5 or 14
• Syntax: "pure-g", "pure-u-1-3", "pure-u-1 pure-u-md-1-3"
• Remarks: use fractions

Skeleton

• Stars: 7771
• Columns: 12
• Syntax: "row", "one column", "eleven columns"
• Remarks: same principle as Bootstrap, different syntax

Blueprint

• Stars: 5338
• Columns: 24
• Syntax: "container showgrid", "span-8", "span-6 append-1"
• Remaks: not responsive, pixel based

The 960 Grid System

• Stars: 2949
• Columns: 12 or 16 columns
• Syntax: "container_12", "grid_7 prefix_1", "grid_1 suffix_11"
• Remarks: not responsive, pixel based

Gumby

• Stars: 2769
• Columns: 12
• Syntax: "row", "one columns", "eleven columns"
• Remarks: same as Skeleton, did not take the time to code "one column"

Neat

• Stars: 2658
• Columns: 12
• Syntax: @include outer-container, @include span-columns(3), @include span-columns(9)
• Remarks: Sass + Bourbon

Grid Style Sheets

• 2144 stars
• ?

The Semantic Grid System

• Stars: 1623
• Columns: 12 by default
• Syntax: .column(9), .column(3)
• Remarks: approach similar to Neat

Simple Grid

• Stars: 1153
• Columns: 12
• Syntax: "grid grid-pad", "col-1-2", "col-1-3"

Base

• Stars: 505 stars
• Columns: 12
• Syntax: "row clear", "col col-1 tablet-col-11 mobile-col-1-2", "col col-11 tablet-col-1 mobile-col-1-2"