CSS Grid 12 Column layout

<div class="grid-container"> <div class="logo col-xs-3 col-md-1"></div> <div class="header col-xs-9 col-md-11"></div> ... </div>

Completely responsive layouts

100% customizable media queries

Nest as many grids as you want

Tiresome row parent div not necessary

Make an element expand all the rows you want, other elements will fit flexibly to its side.

Easily customize column number, space between them, etc.

Set custom column offset

<div class="grid-container"> <div class="col-xs-1 col-xs-offset-12"></div> <div class="col-xs-2 col-xs-offset-11"></div> <div class="col-xs-3 col-xs-offset-10"></div> ... </div>

Align & justify freely both content & items

Justify items (resize window to see changes)

<div class="grid-container col-xs-justify-items-stretch col-sm-justify-items-end col-md-justify-items-start col-lg-justify-items-center"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> ... </div>

Align items (resize window to see changes)

<div class="grid-container col-xs-align-items-stretch col-sm-align-items-end col-md-align-items-start col-lg-align-items-center"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> ... </div>

Align / justify items individually for each size (resize window to see changes)