Tiny percentage SCSS flexbox grid system
Show HTML Layout
<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>

Options

Properties in variables

Adjust any grid props, whatever you like from column size to gutters and columns amount.

Flexible units

You don't need to thing about the grid or columns flexibility. Grid contains functions that automaticly will translate PX units into `%`.

Shift column option

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

Nesting Option

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.

3 breakpoint

The grid has 3 breakpoints — for desktop, tablet and mobile. Because all props written as variables you can adjust or even add aditional.


Instalation

Download the grid.css and add it to your HTML.

<link rel="stylesheet" href="css/grid.css">

Usage

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.

Avalible 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;