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:
row
col
col
<div class="row"> <div class="col"></div> <div class="col"></div> </div>
row
<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>
row
col-sm
col-sm
<div class="row"> <div class="col-sm"></div> <div class="col-sm"></div> </div>
row
<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>
row
col-md
col-md
<div class="row"> <div class="col-md"></div> <div class="col-md"></div> </div>
row
<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>
row
col-lg
col-lg
<div class="row"> <div class="col-lg"></div> <div class="col-lg"></div> </div>
row
<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>
row
col-xl
col-xl
<div class="row"> <div class="col-xl"></div> <div class="col-xl"></div> </div>
row
<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>