It's one of these situations where less is more. The library weights 517 bytes minified, and it lets you write semantic markup.

http://arnaudleray.github.io/pocketgrid/docs/

https://github.com/arnaudleray/pocketgrid

————

Edit: here's the pitch:

* Lightweight: about 0.5kB!

* Pure CSS-only (no CSS preprocessor needed)

* Fluid (by default, but you can set a fixed width or max-width if you want)

* Responsive

* Unlimited number of breakpoints (you can define your own Media Queries)

* Mobile-first compatible (block width is 100% by default)

* Content-first compatible (you can swap columns and you can define your own breakpoints for each content in your page to fine-tune and optimize your content readability: not only 'tablet' or 'smartphone' breakpoints)

* Semantic (as much as a pure CSS grid could be ;) )

* Very simple (just have to define blocks and groups of blocks)

* Unlimited number of columns (no 12 or 16 columns restrictions: blocks just require a width in percentage)

* Unlimited nested grids

* Manage consistent gutters (gutters can be defined in pixels or ems, which is better than percentage-based solutions because it allows consistent gutters even in nested grids)

* Automatic rows (when a row is full, the next blocks go to a new row without doing anything)

* No dependencies

* Compatible with CSS frameworks such as Twitter Bootstrap or Zurb Foundation (you can use the Bootstrap or Foundation components such as buttons, tabs, etc. and use the Pocket grid for other layout)

* Compatibility: IE6+, Firefox, Chrome, Safari, Opera, and mobile browsers (iPhone, iPad, Android...)

————

Edit2, I just submitted it separately: https://news.ycombinator.com/item?id=8729316

- workarounds for browsers I don't care about. Two blocks in SCSS becomes 4 in a framework

- styling done using classes, as above.

- grid systems that can be replaced with a few characters of SCSS maths

http://neat.bourbon.io/