A Basic Responsive Grid Layout with CSS & CSS3

Category: CSS & CSS3 , Layout | June 3, 2014
Author:Carbonell
Views Total:2,415 views
Official Page:Go to website
Last Update:June 3, 2014
License:Unknown

Preview:

A Basic Responsive Grid Layout with CSS & CSS3

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;
}
}

You Might Be Interested In:


2 thoughts on “A Basic Responsive Grid Layout with CSS & CSS3

  1. Shahbaz Ahmed Bhatti

    i Love you CSS Script.com team. You Peoples Post a Very Gooooooooooooooooooood and Best Tutorial, that one i was looking for last 4 month to learn and make practice on responsive website. i Just found your webiste using the Keywords, Basic responsive css layout

    Cheeeeeeeeers CSS Script Team.

    Many Thanks

    Reply
  2. Peter Steintjes

    Hi guys, Can anyone help me. I would like to know how and where I should enter the image so they will be displayed instead of the colors which are displayed now. I know the basics of html and css. thanx in advance.

    Reply

Leave a Reply