Flexbox Grid

Grid system using flex properties

Flex Columns

The columns will divide the space available between them

<!-- The columns will divide the space available between them-->
<div class="row">
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Flex stack column

These column will not be flexible and they will be stacked under its resolution size

Full width under md
Full width under md
Full width under md
<!-- These column will not be flexible and they will be stacked under its resolution size-->
<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>

Content width column

lorem ipsum
hello world
hi
hi there
<div class="row">
  <div class="col-auto"></div>
  <div class="col-auto"></div>
  <div class="col-auto"></div>
  <div class="col-auto"></div>
</div>

12 Columns based

col-md-4
col-md-4
col-md-4
col-md-8
col-md-4
col-md-7
col-md-5
<div class="row">
  <div class="col-md-4 col-xs"></div>
  <div class="col-md-4 col-xs"></div>
  <div class="col-md-4 col-xs"></div>
</div>
<div class="row">
  <div class="col-md-8 col-xs"></div>
  <div class="col-md-4 col-xs"></div>
</div>
<div class="row">
  <div class="col-md-7 col-xs"></div>
  <div class="col-md-5 col-xs"></div>
</div>

Mobile and desktop resize

You can use size prefix to resize columns in each resolution size

col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
<div class="row">
  <!-- col-sm-6 and col-lg-4 are implicit-->
  <div class="col-md-4 col-xs-6"></div>
  <div class="col-md-4 col-xs-6"></div>
  <div class="col-md-4 col-xs-6"></div>
  <div class="col-md-4 col-xs-6"></div>
  <div class="col-md-4 col-xs-6"></div>
  <div class="col-md-4 col-xs-6"></div>
</div>

Mobile, tablet and desktop resize

If you use only a prefix the column will have the same width until the next bigger resolution prefix used

col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
<div class="row">
  <div class="col-xs-12 col-md-3 col-sm-6"></div>
  <div class="col-xs-12 col-md-3 col-sm-6"></div>
  <div class="col-xs-12 col-md-3 col-sm-6"></div>
  <div class="col-xs-12 col-md-3 col-sm-6"></div>
</div>
col-md-9
col-sm-10
col-xs-12
col-md-3
col-sm-2
col-xs-12
<!-- col-lg is implict with col-md-->
<div class="row">
  <div class="col-md-9 col-sm-10 col-xs-12"></div>
  <div class="col-md-3 col-sm-2 col-xs-12"></div>
</div>

Note: Columns don't have side padding, the box color were made with an inner div.