<div class="grid">
<div class="col-desk-12 col-tab-4 col-mob-2"></div>
<div class="col-desk-4 col-tab-5 col-mob-2"></div>
<div class="col-desk-3 col-tab-3 col-mob-4"></div>
<div class="col-desk-2 col-mob-2"></div>
<div class="col-desk-3 col-mob-2"></div>
<div class="col-desk-1 col-mob-2"></div>
<div class="col-desk-4 col-desk-shift-1 col-tab-shift-0 col-tab-6 col-mob-2"></div>
<div class="col-desk-4 col-mob-3"></div>
<div class="col-desk-2 col-mob-1"></div>
<div class="col-desk-1 col-mob-1"></div>
<div class="col-desk-1 col-mob-3"></div>
<div class="col-desk-1 col-mob-1"></div>
<div class="col-desk-2 col-mob-1"></div>
<div class="col-desk-2 col-desk-shift-1 col-tab-shift-0 col-tab-1 col-mob-1"></div>
<div class="col-desk-1 col-tab-7 col-mob-1"></div>
<div class="col-desk-3 col-tab-5 col-mob-4"></div>
</div>Adjust any grid props, whatever you like from column size to gutters and columns amount.
You don't need to thing about the grid or columns flexibility. Grid contains functions that automaticly will translate PX units into `%`.
If you need to pass one or more columns, shift it, you can use a special class — for instance if you want to pass 2 columns `col-desk-shift-2`.
There is two ways for nesting grids. The first option — you can use regular `grid` class for a wrapper and your wrapper will have side margins or you can ise `grid-0` class, this class has all props of the regular `grid` class but with 100% width without side margins.
The grid has 3 breakpoints — for desktop, tablet and mobile. Because all props written as variables you can adjust or even add aditional.
Download the grid.css and add it to your HTML.
<link rel="stylesheet" href="css/grid.css">
There are three types of classes to controll your layout. Desktop breakpoint class="col-desk-12" Tablet breakpoint class="col-tab-12" Mobile breakpoint class="col-tab-4". By default max columnt amount for desktop and tablet is 12 and for mobile is 4, but you can change them in variables.
There are also three types of variables, for desktop, tablet and mobile breakpoint.
$grid-columns: #px;
$grid-sideMargin: #px;
$grid-gutter: #px;
$grid-breakpoint: #px;