blog/_src/assets/less/grid.less

// Prevents padding to be added
* {
	.box-sizing(border-box);
}

// 320px and up
.container {
	padding: 0 7%;
	width: 100%; }

.row {
	margin-top: @line-height-computed;
	margin-bottom: @line-height-computed;
}

.col1, .col2, .col3, .col4, .col5, .col6 {
	width: 100%;
	margin-left: 0;
	// ensures empty columns won't collapse
	min-height: 1px; }

// clear trick
.container:before, .row:before,
.container:after, .row:after { display: table; content: ""; }
.container:after, .row:after { clear: both; }

@media @breakpoint1 {

	.col1,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {  }

}

@media @breakpoint2 {
    
    .container { padding: 0 15%; }
    
	.row {
	    max-width: 35em;
	    margin: @line-height-computed*2 auto;
	    padding-left: 0;
	    padding-right: 0;
	}

	.col1,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {
		float: left;
		margin-left: 4%; }

	.col1:first-child,
	.col2:first-child,
	.col3:first-child,
	.col4:first-child,
	.col5:first-child,
	.col6,
    .col3:nth-child(2n+3),
    .col2:nth-child(3n+4),
    .col1:nth-child(6n+7) { 
        margin-left: 0;
        clear: both
    }

	.col1 { width: 13%; }
	.col2 { width: 30.6%; }
	.col3 { width: 48%; }
	.col4 { width: 65%; }
	.col5 { width: 82%; }
	.col6 { width: 100%; }

}