A Basic Responsive Grid Layout with CSS & CSS3

Preview:

Description:

A flexible, fully responsive, mobile-friendly grid layout built on top of CSS and CSS3 media queries.

How to use it:

Markup Html structure.

<div class="container">
<div class="row">
<div class="col-6 color-1"></div>
</div>
<div class="row">
<div class="col-2 color-4"></div>
<div class="col-2 color-2"></div>
<div class="col-1 color-5 col-mobile"></div>
<div class="col-1 color-6 col-mobile"></div>
</div>
<div class="row">
<div class="col-4 color-6 col-mobile"></div>
<div class="col-2 color-4 col-mobile"></div>
</div>
<div class="row">
<div class="col-3 color-2"></div>
<div class="col-3 color-3"></div>
</div>
<div class="row">
<div class="col-2 color-4 col-mobile"></div>
<div class="col-4 color-6 col-mobile"></div>
</div>
</div>

The CSS  to style the grid layout and make it responsive to adapt to any screen sizes.

body {
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: auto;
}
.row {
float: left;
width: 100%;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, col-40 {
float: left;
margin: 0 2% 20px 0;
}
.col-1 {
width: 15%;
}
.col-2 {
width: 32%;
}
.col-3 {
width: 49%;
}
.col-4 {
width: 66%;
}
.col-5 {
width: 83%;
}
.col-6 {
width: 100%;
}
div.row > div:last-child {
margin-right: 0;
}
.color-1 {
min-height: 150px;
background: coral;
}
.color-2 {
min-height: 150px;
background: limegreen;
}
.color-3 {
min-height: 150px;
background: #E9E9E9;
;
}
.color-4 {
min-height: 150px;
background: #424242;
;
}
.color-5 {
min-height: 150px;
background: #ccc;
;
}
.color-6 {
min-height: 150px;
background: #FF9900;
;
}

The CSS3 media queries  to make the grid layout responsive to adapt to any screen sizes.

@media only screen and (max-width: 767px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
float: none;
margin: 0 2% 20px 2%;
width: 96%;
}
.col-mobile {
float: left;
width: 46%;
}
div.container > div:last-child {
margin-bottom: 0;
}
}