Download

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>