Percentage Grid

What is this?

A General Overview

A Percentage Grid

This is a simple, custom grid that uses percentage-based widths (%) to create columns with simple, semantic class labels such as:

one-half
one-third
one-fourth
one-fifth

A Responsive Grid

Yes, it's responsive - go ahead and resize your browser. It uses two break points to target three screen sizes:

Destop (1200px fixed width with column)
Tablet (fluid-width with column)
Mobile (768px and below fluid-width with no column (stacked)

How to Use

Download the source files (.zip) by clicking on the button below.

Download Source Files

Code Examples

Below are some code excerpts so you can see how the grid works

EXAMPLE HTML:

<section>
    <div class="row">
        <div class="one column">
            <p>one column</p>
        </div>
    </div>
</section>

<section>
    <div class="row">
        <div class="one-half column">
            <p>one-half column</p>
        </div>
        <div class="one-half column">
            <p>one-half column</p>
        </div>
    </div>
</section>

<section>
    <div class="row">
        <div class="one-third column">
            <p>one-third column.</p>
        </div>
        <div class="one-third column">
            <p>one-third column</p>
        </div>
        <div class="one-third column">
            <p>one-third column</p>
        </div>
    </div>
</section>

<section>
    <div class="row">
        <div class="one-fourth column">
            <p>one-fourth column</p>
        </div>
        <div class="one-fourth column">
            <p>one-fourth column</p>
        </div>
        <div class="one-fourth column">
            <p>one-fourth column</p>
        </div>
        <div class="one-fourth column">
            <p>one-fourth column</p>
        </div>
    </div>
</section>

<section>
    <div class="row">
        <div class="one-fifth column">
            <p>one-fifth column</p>
        </div>
        <div class="one-fifth column">
            <p>one-fifth column</p>
        </div>
        <div class="one-fifth column">
            <p>one-fifth column</p>
        </div>
        <div class="one-fifth column">
            <p>one-fifth column</p>
        </div>
        <div class="one-fifth column">
            <p>one-fifth column</p>
        </div>
    </div>
</section>

EXAMPLE CSS:

/* centered container */
.container {
	width: 98%;
	padding: 0 1%;
	margin: 0 auto;
}

.row {
	margin: 1em 0;	
}

.column {
	float: left;
	margin: 0 0 0 2%; /* 2% gutter */	
}

.column:first-child {
	margin: 0;	
}

.one.column { width: 100%; }
.one-half.column { width: 49%; } 
.one-third.column {	width: 32%; }
.one-fourth.column { width: 23.5%; } 
.one-fifth.column {	width: 18.4%; }

3 Media Queries:

/* Desktop */
@media (min-width: 1200px) {
	/* FIXED WIDTH */
    .container { width: 1200px; } 
}
 
/* Tablet */
@media (min-width:768px) and (max-width:1199px) {
	/* FLUID w/ column (default) */
}

/* Mobile */
@media (max-width: 767px) {
	/* FLUID w/ all columns stacked vertically */
	.row {
		margin: 0;	
	}
	.column, .column:first-child {
		margin: .25em 0;
	}
	.one.column,
	.one-half.column,
	.one-third.column,
	.one-fourth.column,
	.one-fifth.column {	width: 100%; }
}

Clearfix on Rows:

.row:after {
  content: "";
  display: table;
  clear: both;
}