Grids are formed by rows and columns. A grid with 12 columns can be easily adopted for different screen sizes. In this recipe, CSS classes are used to set the width of the grid items. There are 12 classes for a grid of 12 columns, where each class has a width that spans a number of columns. The total items that span the columns in a row should be equal to the total number of columns in the grid. So, when your grid has 12 columns, a row can contain, for instance, three items that span four columns, or one item that spans one column and one item that spans 11 columns.
The code used in this recipe is based on the Flexbox library, which can be found at http://flexboxgrid.com. The Flexbox library builds a grid, leveraging the CSS3 Flexible box module and using the same naming conventions as Twitter's Bootstrap.
Though it will be interesting to inspect the compiled code, the best way to test the grid you will construct in this recipe will be to use...