TableGrid

This is a really simple and responsive CSS grid.

Here is an example to use this CSS code

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

<div class="col"> Column 1 </div>
<div class="col"> Column 2 </div>
<div class="col"> Column 3 </div>
<div class="row"> Container </div>

<div class="col"> Column 1 </div>
<div class="col"> Column 2 </div>
<div class="col"> Column 3 </div>
<div class="col"> Column 4 </div>

Col 1

Col 2

Col 3

Col 4

Col 5

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 7

This is the CSS code

 
@media (min-width: 640px) { 

	.container { 

	    display: block; 

		margin: 0 auto; 

		max-width: 1170px 

	} 

	.container-fluid { 

		display: block 

	} 

	.row, 

	.max-row { 

		display: table; 

		table-layout: fixed; 

		width: 100% 

	} 

	.col { 

		display: table-cell 

	} 

	.row { 

		margin: 0 auto; 

		max-width: 1170px 

	} 

}

Stylus code

site-width 	= 1170px 

desktop		= 1024px 

tablet 		= 768px 

mobile 		= 640px 

old-mobile 	= 480px 

estrutura() 

	.container 

		display block 

		margin 0 auto 

		max-width site-width 

		 

	.container-fluid 

		display block 

		 

	.row 

	.max-row 

		display table 

		table-layout fixed 

		width 100% 

		 

	.col 

		display table-cell 

@media (min-width mobile) 

	estrutura() 

	.row 

		margin 0 auto 

		max-width site-width 

@media (max-width mobile) 

	.row 

		padding-left 10px 

		padding-right 10px 

	.col 

		text-align center 

@media (min-width mobile) and (max-width 1310px) 

	.container 

		padding-left 10px 

		padding-right 10px