The grid system – float and clearfix.
The grid is based on 12 columns in a row.
<div class="grid-container">
<div class="row">
<div class="column-n">Column</div>
<div class="column-n">Column</div>
</div>
</div>
n – the number of column-elements (form 1 to 12. The sum must be 12)
<div class="grid-container">
<div class="row">
<div class="column-6">Column</div>
<div class="column-6">Column</div>
</div>
</div>
The column width is a multiple of the width of the column-element (column-1).
[class*="column-"] {
float:left;
}
.column-1 {
width: calc(100%/12); /*
width: 8.3333333333%; */
}
.column-6 {
width: width: 50%;
/*6 * 8.3333333333%; */
}
To prevent collapse of parent element that contain floating children the parent (row) must have fix commonly known as clearfix:
.clearfix::before,
.clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
Grid with 12 columns
<div class="grid-container">
<div class="row">
<div class="column-1">1 Column</div>
<div class="column-1">2 Column</div>
<div class="column-1">3 Column</div>
<div class="column-1">4 Column</div>
<div class="column-1">5 Column</div>
<div class="column-1">6 Column</div>
<div class="column-1">7 Column</div>
<div class="column-1">8 Column</div>
<div class="column-1">9 Column</div>
<div class="column-1">10 Column</div>
<div class="column-1">11 Column</div>
<div class="column-1">12 Column</div>
</div>
</div>
1 column
2 column
3 column
4 column
5 column
6 column
7 column
8 column
9 column
10 column
11 column
12 column
Grid with 2 columns
There are 6 column-elements per column (class="column-6")
<div class="grid-container">
<div class="row">
<div class="column-6">1 Column</div>
<div class="column-6">2 Column</div>
</div>
</div>
1column
2column
Grid with 6 columns
There are 2 column-elements per column (class="column-2")
<div class="grid-container">
<div class="row">
<div class="column-2">1 Column</div>
<div class="column-2">2 Column</div>
<div class="column-2">3 Column</div>
<div class="column-2">4 Column</div>
<div class="column-2">5 Column</div>
<div class="column-2">6 Column</div>
</div>
</div>
1column
2column
3column
4column
5column
6column
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12