Building a grid with grid classes
Grid-based layouts divide your design into a collection of rows with equal-sized columns. Content and graphical elements can be organized according to this layout. Grids help in creating a logical and formal structure for designs. They prevent inconsistencies between the original design and the final implementation in HTML as designers and developers work with the same grid.
Grids are also helpful in responsive design, because the grid's columns can easily be rearranged to fit different screen widths.
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...
