Simple Dynamic Grid Layout with CSS & CSS3

Preview:

Description:

A simple, dynamic, fluid and fully responsive Pinterest-style grid layout with sleek hover effects based on CSS and CSS3 transitions & transforms. No any Javascript required. Great for portfolio websites that work nicely both on desktop and mobile devices.

How to use it:

Create the Html for a grid layout following the markup structure like this.

<div class="clearfix wrap"> 
  <!--Column#1-->
  <div class="col col2">
    <div class="box box6"></div>
    <div class="box box4"></div>
    <div class="box box2"></div>
  </div>
  <!--Column#2-->
  <div class="col col3">
    <div class="box box2"></div>
    <div class="box box6"></div>
    <div class="col col3">
      <div class="box box4"></div>
    </div>
    <div class="col col3">
      <div class="box box4"></div>
    </div>
    <div class="col col4">
      <div class="box box4"></div>
    </div>
  </div>
  <!--Column#3-->
  <div class="col col1">
    <div class="box box4"></div>
    <div class="box box6"> </div>
    <div class="box box2"></div>
  </div>
  <!--Column#4-->
  <div class="col col4">
    <div class="col col5">
      <div class="box box3"></div>
      <div class="box box2"></div>
    </div>
    <div class="col col5">
      <div class="box box2"></div>
      <div class="box box3"></div>
    </div>
    <div class="box box7"></div>
  </div>
</div>

The required CSS/CSS3 styles.

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/*CSS RESET*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }
body { line-height: 1; }
ol,
ul { list-style: none; }
blockquote,
q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*GLOBALS*/
a { text-decoration: none; }
body,
hmtl {
  background: #ccc;
  font-family: Arial, sans-serif;
}
/*WRAPPER*/
.wrap {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
}
/*COLUMNS*/
.col {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 20%;
  padding: 8px;
}
.col1 { width: 10%; }
.col2 { width: 20%; }
.col3 { width: 30%; }
.col4 { width: 40%; }
.col5 { width: 50%; }
.col6 { width: 60%; }
.col7 { width: 70%; }
.col8 { width: 80%; }
.col9 { width: 90%; }
.col10 { width: 100%; }
/*SUB-COLUMN*/
.col .col {
  padding: 0;
  padding-left: 0px;
}
.col .col ~ .col { padding-left: 16px; }
.col .col1 { width: 10%; }
.col .col2 { width: 20%; }
.col .col3 { width: 30%; }
.col .col4 { width: 40%; }
.col .col5 { width: 50%; }
.col .col6 { width: 60%; }
.col .col7 { width: 70%; }
.col .col8 { width: 80%; }
.col .col9 { width: 90%; }
.col .col10 { width: 100%; }
/*BOXES*/
.box {
  width: 100%;
  margin-bottom: 12px;
  background: #999;
  clear: both;
  background-color: #eaeaea;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;
  border: 5px solid #fff;
  background-position: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.box:hover {
  -moz-transform: scale(0.98);
  -webkit-transform: scale(0.98);
  -o-transform: scale(0.98);
  -ms-transform: scale(0.98);
  transform: scale(0.98);
}
.box1 { height: 50px; }
.box2 { height: 100px; }
.box3 { height: 150px; }
.box4 { height: 200px; }
.box5 { height: 250px; }
.box6 { height: 300px; }
.box7 { height: 350px; }
.box8 { height: 400px; }
.box9 { height: 450px; }
.box10 { height: 500px; }
/*TEXT*/
h2,
span {
  padding: 0 15px;
  text-shadow: rgba(0,0,0,0.8) 0px 0px 3px;
}
h2 {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Kaushan Script', cursive;
  margin-bottom: 4px;
}
span { font-size: 14px; }
 @media screen and (max-width: 1100px) {
.col1 { width: 20%; }
.col2 { width: 40%; }
.col3 { width: 60%; }
.col4 { width: 80%; }
.col5 { width: 100%; }
.col6 { width: 120%; }
.col7 { width: 140%; }
.col8 { width: 160%; }
.col9 { width: 180%; }
.col10 { width: 200%; }
}
 @media screen and (max-width: 678px) {
.col { width: 100%; }
.col .col {
  width: 100%;
  padding-left: 0 !important;
}
}

This awesome CSS3 grid layout is created by AndreCortellini. You can check his profile here for more CSS3 & Javascript designs.