Two new important parts of CSS allow to solve layout problems:

• Flexible Box Layout model — Flexbox
• Grid layout model — Grid

Both allows to prepare correct and responsive layouts, and are used by modern CSS frameworks to create grids.

Let’s discover them through tow interesting games where we can use them and each of their properties:

• http://cssgridgarden.com/ for the grid
• http://flexboxfroggy.com/ for the flexbox

Canonical references can be found on MDN:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

This post is dedicated to Jan Krokaert, who teach graphism at Brussels.