CSS Grid 12 Column layout
by Erik Monjas<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>
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)
<div class="grid-container ...">
<div class="col-xs-6 col-xs-align-self-center col-sm-align-self-start col-md-align-self-stretch col-lg-align-self-end col-xs-justify-self-center col-sm-justify-self-start col-md-justify-self-stretch col-lg-justify-self-end"></div>
<div class="col-xs-6"></div>
...
</div>