Basic grid layouts to get you familiar with using grid system.
Install with npm npm install grid-styled-css --save
The basic understanding for rendering grid is the sumation of the used columns which should always be eqaul to 12.
Consider rendering grid using class
.col-4.col-6.col-2. In this sample the
summation is
4 + 6 + 2 = 12 so the grid would render properly. So always
take care column sumation.
There are five tiers to the grid system. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Get three equal-width columns. On mobile devices, tablets and below, the columns will automatically stack.
Get three columns of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
Get two columns.