Skip to content

Instantly share code, notes, and snippets.

@tkrotoff tkrotoff/Grids.md
Last active Aug 29, 2015

Embed
What would you like to do?
Popular CSS Grids

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"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.