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 ...