A new technique for responsive grids I've been working on which uses inline-block and text-align: justify.

A list of objects that eventually scales up to 4-columns

This is a simple proof of concept for trimming out the fat on a cumbersome survey list that has way too much information to be humanly digestible.

We put together a small demo to show easy it is to start creating with the Foundation Grid! We've used visibility classes, a medium grid, and even source ordering. You can play with this Codepen yourself: go ahead and fork it, change it, enjoy it!

Simple effect for roll over on grids, where the content slides based on the previous position.

You can see also in use here: http://worldbakingday.com

A list of images that by default is two-columns. As screen real estate becomes available, more columns are added.

I'm playing with flexbox to build a future proof fluid and responsive grid system.

Flexbox is AWESOME on this task because it do every single thing a grid user need:

A list of objects with several items that are twice as big.

A list of objects with section title separators.

Similar to Masonry, but with less heavy javascript. This particular version is limited to just square and 2:3 tall images, so it's definitely not as flexible as masonry, just snappier. All positioning is done in CSS, with just a single Javascript loop over the elements to update the classes. Note that bad images would expose the background.

A list of objects with several items that are twice as big.

Example of a responsive grid using element queries instead of media queries.