Taking a starting point of the pattern Brad Frost lists with his responsive patterns http://codepen.io/bradfrost/pen/GFHmf.

The original pattern does not cope well with different height of content added to the boxes. With minimal changes to the original I am dealing with that issue and then enhancing the display for browsers that support newer features.

I’m using CSS Feature Queries to enhance the pattern.

Flexbox and grid enable the boxes to line up even if we add additional content to any box.

Note that we use Feature Queries in such a way that we start with the version for the most limited of browsers and then build up to those that support grid, making use of the fact that in the CSS Cascade properties and values defined later in the stylesheet override those that come before.

See the Pen List with thumbnails enhanced with Grid and Flexbox by rachelandrew (@rachelandrew) on CodePen.