Let's have fun

Let's have fun

Grid

Info

The grid system of this framework is built with the flex system of CSS3. It consists of a row (row) and columns (col). Each row has a maximum width of 100%, so the number of columns in that row may never exceed 100%. A row can therefore contain, for example, 4 columns of 25%. The columns are numbered from 1 to 12 where 1 = 8.333333% and 12 = 100%. The unnumbered columns within the breakpoints automatically take the part of the 100% and the number of columns. This framework uses 4 breakpoints and assumes Always design for mobile first! So to start with, the columns are all 100% and at each breakpoint the columns of that breakpoint will be next to each other.
This does not apply to the columns col col-1 col-2.... these remain next to each other on every screen!

Then there are also: col-half = 50%, col-third = 35%, col-twothird = 65%, col-quarter = 25%, col-threequarter = 75%

The breakpoints are:

col

row
col
col
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
                    

row

col
col
col
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
                    
row
col-1
col-11
<div class="row">
  <div class="col-1"></div>
  <div class="col-11"></div>
</div>
                    

row

col-2
col-10
<div class="row">
  <div class="col-2"></div>
  <div class="col-10"></div>
</div>
                    

row

col-3
col-9
<div class="row">
  <div class="col-3"></div>
  <div class="col-9"></div>
</div>
                    

row

col-4
col-8
<div class="row">
  <div class="col-4"></div>
  <div class="col-8"></div>
</div>
                    

row

col-5
col-7
<div class="row">
  <div class="col-5"></div>
  <div class="col-7"></div>
</div>
                    

row

col-6
col-6
<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>
                    

row

col-12
<div class="row">
  <div class="col-12"></div>
</div>
                    
row
col-half
col-half
<div class="row">
  <div class="col-half"></div>
  <div class="col-half">l</div>
</div>
                    

row

col-third
col-twothird
<div class="row">
  <div class="col-third"></div>
  <div class="col-twothird">l</div>
</div>
                    

row

col-quarter
col-threequarter
<div class="row">
  <div class="col-quarter"></div>
  <div class="col-threequarter">l</div>
</div>
                    

col-sm

row
col-sm
col-sm
<div class="row">
  <div class="col-sm"></div>
  <div class="col-sm"></div>
</div>
                    

row

col-sm
col-sm
col-sm
<div class="row">
  <div class="col-sm"></div>
  <div class="col-sm"></div>
  <div class="col-sm"></div>
</div>
                    
row
col-sm-1
col-sm-11
<div class="row">
  <div class="col-sm-1"></div>
  <div class="col-sm-11"></div>
</div>
                    

row

col-sm-2
col-sm-10
<div class="row">
  <div class="col-sm-2"></div>
  <div class="col-sm-10"></div>
</div>
                    

row

col-sm-3
col-sm-9
<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-9"></div>
</div>
                    

row

col-sm-4
col-sm-8
<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-8"></div>
</div>
                    

row

col-sm-5
col-sm-7
<div class="row">
  <div class="col-sm-5"></div>
  <div class="col-sm-7"></div>
</div>
                    

row

col-sm-6
col-sm-6
<div class="row">
  <div class="col-sm-6"></div>
  <div class="col-sm-6"></div>
</div>
                    

row

col-sm-12
<div class="row">
  <div class="col-sm-12"></div>
</div>
                    
row
col-sm-half
col-sm-half
<div class="row">
  <div class="col-sm-half"></div>
  <div class="col-sm-half">l</div>
</div>
                    

row

col-sm-third
col-sm-twothird
<div class="row">
  <div class="col-sm-third"></div>
  <div class="col-sm-twothird">l</div>
</div>
                    

row

col-sm-quarter
col-sm-threequarter
<div class="row">
  <div class="col-sm-quarter"></div>
  <div class="col-sm-threequarter">l</div>
</div>
                    

col-md

row
col-md
col-md
<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>
                    

row

col-md
col-md
col-md
<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>
                    
row
col-md-1
col-md-11
<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-11"></div>
</div>
                    

row

col-md-2
col-md-10
<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-10"></div>
</div>
                    

row

col-md-3
col-md-9
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-9"></div>
</div>
                    

row

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

row

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

row

col-md-6
col-md-6
<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>
                    

row

col-md-12
<div class="row">
  <div class="col-md-12"></div>
</div>
                    
row
col-md-half
col-md-half
<div class="row">
  <div class="col-md-half"></div>
  <div class="col-md-half">l</div>
</div>
                    

row

col-md-third
col-md-twothird
<div class="row">
  <div class="col-md-third"></div>
  <div class="col-md-twothird">l</div>
</div>
                    

row

col-md-quarter
col-threequarter
<div class="row">
  <div class="col-md-quarter"></div>
  <div class="col-threequarter">l</div>
</div>
                    

col-lg

row
col-lg
col-lg
<div class="row">
  <div class="col-lg"></div>
  <div class="col-lg"></div>
</div>
                    

row

col-lg
col-lg
col-lg
<div class="row">
  <div class="col-lg"></div>
  <div class="col-lg"></div>
  <div class="col-lg"></div>
</div>
                    
row
col-lg-1
col-lg-11
<div class="row">
  <div class="col-lg-1"></div>
  <div class="col-lg-11"></div>
</div>
                    

row

col-lg-2
col-lg-10
<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-10"></div>
</div>
                    

row

col-lg-3
col-lg-9
<div class="row">
  <div class="col-lg-3"></div>
  <div class="col-lg-9"></div>
</div>
                    

row

col-lg-4
col-lg-8
<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-8"></div>
</div>
                    

row

col-lg-5
col-lg-7
<div class="row">
  <div class="col-lg-5"></div>
  <div class="col-lg-7"></div>
</div>
                    

row

col-lg-6
col-lg-6
<div class="row">
  <div class="col-lg-6"></div>
  <div class="col-lg-6"></div>
</div>
                    

row

col-lg-12
<div class="row">
  <div class="col-lg-12"></div>
</div>
                    
row
col-lg-half
col-lg-half
<div class="row">
  <div class="col-lg-half"></div>
  <div class="col-lg-half">l</div>
</div>
                    

row

col-lg-third
col-lg-twothird
<div class="row">
  <div class="col-lg-third"></div>
  <div class="col-lg-twothird">l</div>
</div>
                    

row

col-lg-quarter
col-lg-threequarter
<div class="row">
  <div class="col-lg-quarter"></div>
  <div class="col-lg-threequarter">l</div>
</div>
                    

col-xl

row
col-xl
col-xl
<div class="row">
  <div class="col-xl"></div>
  <div class="col-xl"></div>
</div>
                    

row

col-xl
col-xl
col-xl
<div class="row">
  <div class="col-xl"></div>
  <div class="col-xl"></div>
  <div class="col-xl"></div>
</div>
                    
row
col-xl-1
col-xl-11
<div class="row">
  <div class="col-xl-1"></div>
  <div class="col-xl-11"></div>
</div>
                    

row

col-xl-2
col-xl-10
<div class="row">
  <div class="col-xl-2"></div>
  <div class="col-xl-10"></div>
</div>
                    

row

col-xl-3
col-xl-9
<div class="row">
  <div class="col-xl-3"></div>
  <div class="col-xl-9"></div>
</div>
                    

row

col-xl-4
col-xl-8
<div class="row">
  <div class="col-xl-4"></div>
  <div class="col-xl-8"></div>
</div>
                    

row

col-xl-5
col-xl-7
<div class="row">
  <div class="col-xl-5"></div>
  <div class="col-xl-7"></div>
</div>
                    

row

col-xl-6
col-xl-6
<div class="row">
  <div class="col-xl-6"></div>
  <div class="col-xl-6"></div>
</div>
                    

row

col-xl-12
<div class="row">
  <div class="col-xl-12"></div>
</div>
                    
row
col-xl-half
col-xl-half
<div class="row">
  <div class="col-xl-half"></div>
  <div class="col-xl-half">l</div>
</div>
                    

row

col-xl-third
col-xl-twothird
<div class="row">
  <div class="col-xl-third"></div>
  <div class="col-xl-twothird">l</div>
</div>
                    

row

col-xl-quarter
col-xl-threequarter
<div class="row">
  <div class="col-xl-quarter"></div>
  <div class="col-xl-threequarter">l</div>
</div>