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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.