Layout Classes

A basic, flexible grid layout that can be implemented to make your HTML pages not just a long list of stacked content.

Rows with Responsive Columns

1/2 width column

1/3 width inside 1/2 col

1/3 width inside 1/2 col

1/3 width inside 1/2 col

1/3 width column

1/3 width column

1/3 width column

1/3 width column

2/3 width column

4/5 width column

1/5 width column

3/4 width column

1/4 width column

3/5 width column

2/5 width column

1/2 width column

1/2 width column

1/4 width column

1/4 width column

1/2 width column

The code is right here

To create the grids to the left, you will need to use the following markup:

HTML

<div class="row">
  <div class="col col-##">
    Content goes here
  </div>
</div>

CSS

/* Contains the columns */
.row{
  margin-left:-20px;
  margin-bottom:$20px;
  *zoom:1;
}
.row:before,
.row:after{
  content:"";
  display:table;
}
.row:after{
  clear:both;
}

/* Base Column */
.col{
  float:left;
  margin-bottom:0!important;
  padding-left:20px
  position:relative;
  width:100%;
}

/* Size the columns in the row */
.col-90 {width:90%}
.col-80 {width:80%}
.col-75 {width:75%}
.col-66 {width:66.6666%}
.col-60 {width:60%}
.col-50 {width:50%}
.col-40 {width:40%}
.col-33 {width:33.3333%}
.col-25 {width:25%}
.col-20 {width:20%}
.col-10 {width:10%}