Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">

	<header>
    	<div class="logo">
        	<h1>Percentage Grid</h1>
            <p class="tagline">A Fluid Responsive Grid</p>
        </div>        
    </header>
    
    <div class="grid">
    
    	<section>
        	<div class="row">
            	<div class="one-whole column">
                    <p>one-whole column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
            	<div class="one-half column">
                    <p>one-half column</p>
                </div><!-- END COLUMN -->
            	<div class="one-half column">
                    <p>one-half column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-half column split">
                    <p>one-half column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-half column split">
                    <p>one-half column split</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
            	<div class="one-third column">
                    <p>one-third column</p>
                </div><!-- END COLUMN -->
            	<div class="one-third column">
                    <p>one-third column</p>
                </div><!-- END COLUMN -->
            	<div class="one-third column">
                    <p>one-third column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-third column">
                    <p>one-third column</p>
                </div><!-- END COLUMN -->
            	<div class="two-thirds column">
                    <p>two-thirds column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fourth column split">
                    <p>one-fourth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column split">
                    <p>one-fourth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column split">
                    <p>one-fourth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column split">
                    <p>one-fourth column split</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            	<div class="three-fourths column">
                    <p>three-fourths column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-half column">
                    <p>one-half column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fourth column">
                    <p>one-fourth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="two-fifths column">
                    <p>two-fifths column</p>
                </div><!-- END COLUMN -->
            	<div class="two-fifths column">
                    <p>two-fifths column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="three-fifths column">
                    <p>three-fifths column</p>
                </div><!-- END COLUMN -->
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fifth column">
                    <p>one-fifth column</p>
                </div><!-- END COLUMN -->
            	<div class="four-fifths column">
                    <p>four-fifths column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
    	<section>
        	<div class="row">
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-sixth column">
                    <p>one-sixth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
    	<section>
        	<div class="row">
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            	<div class="one-seventh column">
                    <p>one-seventh column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
    	<section>
        	<div class="row">
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column">
                    <p>one-eighth column</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
    	<section>
        	<div class="row">
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            	<div class="one-eighth column split">
                    <p>one-eighth column split</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
    	<section>
        	<div class="row">
                <div class="one-twelth column"><p>1</p></div>
                <div class="one-twelth column"><p>2</p></div>
                <div class="one-twelth column"><p>3</p></div>
                <div class="one-twelth column"><p>4</p></div>
                <div class="one-twelth column"><p>5</p></div>
                <div class="one-twelth column"><p>6</p></div>
                <div class="one-twelth column"><p>7</p></div>
                <div class="one-twelth column"><p>8</p></div>
                <div class="one-twelth column"><p>9</p></div>
                <div class="one-twelth column"><p>10</p></div>
                <div class="one-twelth column"><p>11</p></div>
                <div class="one-twelth column"><p>12</p></div>
            </div>
        </section>
        
        <section>
        	<div class="row">
                <div class="one-twelth column"><p>1</p></div>
                <div class="eleven-twelths column"><p>11</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="two-twelths column"><p>2</p></div>
                <div class="ten-twelths column"><p>10</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="three-twelths column"><p>3</p></div>
                <div class="nine-twelths column"><p>9</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="four-twelths column"><p>4</p></div>
                <div class="eight-twelths column"><p>8</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="five-twelths column"><p>5</p></div>
                <div class="seven-twelths column"><p>7</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="six-twelths column"><p>6</p></div>
                <div class="six-twelths column"><p>6</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="seven-twelths column"><p>7</p></div>
                <div class="five-twelths column"><p>5</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="eight-twelths column"><p>8</p></div>
                <div class="four-twelths column"><p>4</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="nine-twelths column"><p>9</p></div>
                <div class="three-twelths column"><p>3</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="ten-twelths column"><p>10</p></div>
                <div class="two-twelths column"><p>2</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="eleven-twelths column"><p>11</p></div>
                <div class="one-twelth column"><p>1</p></div>
            </div><!-- END ROW -->
        	<div class="row">
                <div class="twelve-twelths column"><p>12</p></div>
            </div><!-- END ROW -->
        </section>
        
        
    
    	<section>
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-one-twelth one-twelth column">
                    <p>off 1</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-two-twelths one-twelth column">
                    <p>off 2</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-three-twelths one-twelth column">
                    <p>off 3</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-four-twelths one-twelth column">
                    <p>off 4</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-five-twelths one-twelth column">
                    <p>off 5</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-six-twelths one-twelth column">
                    <p>off 6</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-seven-twelths one-twelth column">
                    <p>off 7</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-eight-twelths one-twelth column">
                    <p>off 8</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-nine-twelths one-twelth column">
                    <p>off 9</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-ten-twelths one-twelth column">
                    <p>off 10</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-eleven-twelths one-twelth column">
                    <p>off 11</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
        
    
    	<section>
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-ten-twelths one-twelth column">
                    <p>off 10</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-nine-twelths one-twelth column">
                    <p>off 9</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-eight-twelths one-twelth column">
                    <p>off 8</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-seven-twelths one-twelth column">
                    <p>off 7</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-six-twelths one-twelth column">
                    <p>off 6</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-five-twelths one-twelth column">
                    <p>off 5</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-four-twelths one-twelth column">
                    <p>off 4</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-three-twelths one-twelth column">
                    <p>off 3</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-two-twelths one-twelth column">
                    <p>off 2</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-twelth column">
                    <p>1</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-one-twelth one-twelth column">
                    <p>off 1</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="one-fourth column ">
                    <p>1/4 column</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-one-half one-fourth column">
                    <p>1/4 column offset by 1/2</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-one-fifth one-fifth column">
                    <p>1/5 column offset by 1/5</p>
                </div><!-- END COLUMN -->
            	<div class="offset-by-one-fifth one-fifth column">
                    <p>1/5 column offset by 1/5</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-one-third one-third column">
                    <p>1/3 column offset by 1/3</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-one-fourth one-half column">
                    <p>1/2 column offset by 1/4</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-two-twelths eight-twelths column">
                    <p>eight-twelths column offset-by-two-twelths</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="offset-by-one-twelth ten-twelths column">
                    <p>ten-twelths column offset-by-one-twelth</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
    	<section>
        	<div class="row">
            	<div class="centered ten-twelths column">
                    <p>ten-twelths column centered</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="centered eight-twelths column">
                    <p>eight-twelths column centered</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="centered one-half column">
                    <p>one-half column centered</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        	<div class="row">
            	<div class="centered one-third column">
                    <p>one-third column centered</p>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        
   	</div><!-- CLOSE GRID EXAMPLE -->
    
    <div class="content">
        
        <section>
            <div class="row">
            	<div class="one column">
        			<h2>What is this?</h2>
                    <h3 class="byline">A General Overview</h3>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
            <div class="row">
            	<div class="one-third column">
                	<h3>A Percentage Grid</h3>
                    <p>This is a simple, custom grid that uses percentage-based widths (%) to create columns with simple, semantic class labels such as: 
                    <ul>
                    	<li>one-half</li>
                    	<li>one-third</li>
                    	<li>one-fourth</li>
                    	<li>one-fifth</li>
                    </ul></p>
                </div><!-- END COLUMN -->
            	<div class="one-third column">
                	<h3>A Responsive Grid</h3>
                    <p>Yes, it's responsive - go ahead and resize your browser. It uses two break points to target three screen sizes: 
                    <ul>
                    	<li>Destop (1200px fixed width with column)</li>
                        <li>Tablet (fluid-width with column)</li>
                        <li>Mobile (768px and below fluid-width with no column (stacked)</li>
                    </ul></p>
                </div><!-- END COLUMN -->
            	<div class="one-third column">
                	<h3>How to Use</h3>
                    <p>Download the source files (.zip) by clicking on the button below.</p> 
       				<p><a href="../test-grid-custom-percentage.zip" class="downloadbutton">Download Source Files</a></p> 
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
        	
        <section>
            <div class="row">
            	<div class="one column">
        			<h2>Code Examples</h2>
                    <h3 class="byline">Below are some code excerpts so you can see how the grid works</h3>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
            <div class="row">
            	<div class="one-half column">
                	<h3>EXAMPLE HTML:</h3>
                    <pre>
&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="one column"&gt;
            &lt;p&gt;one column&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="one-half column"&gt;
            &lt;p&gt;one-half column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-half column"&gt;
            &lt;p&gt;one-half column&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="one-third column"&gt;
            &lt;p&gt;one-third column.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-third column"&gt;
            &lt;p&gt;one-third column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-third column"&gt;
            &lt;p&gt;one-third column&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="one-fourth column"&gt;
            &lt;p&gt;one-fourth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fourth column"&gt;
            &lt;p&gt;one-fourth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fourth column"&gt;
            &lt;p&gt;one-fourth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fourth column"&gt;
            &lt;p&gt;one-fourth column&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="one-fifth column"&gt;
            &lt;p&gt;one-fifth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fifth column"&gt;
            &lt;p&gt;one-fifth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fifth column"&gt;
            &lt;p&gt;one-fifth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fifth column"&gt;
            &lt;p&gt;one-fifth column&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="one-fifth column"&gt;
            &lt;p&gt;one-fifth column&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;                  
                    </pre>
                </div><!-- END COLUMN -->
            	<div class="one-half column">
                	<h3>EXAMPLE CSS:</h3>
                    <pre>
/* 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%; }

                    </pre>
                    <h3>3 Media Queries:</h3>
                    <pre>
/* 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%; }
}   
                    </pre>
                    
                    <h3>Clearfix on Rows:</h3>
                    <pre>
.row:after {
  content: "";
  display: table;
  clear: both;
}                   
                    </pre>
                </div><!-- END COLUMN -->
            </div><!-- END ROW -->
        </section>
    
     	
        
        
   	</div><!-- CLOSE CONTENT -->
    
    <footer>
        <a href="../test-grid-custom-percentage.zip" class="downloadbutton">Download Source Files</a>
    </footer>

</div>
              
            
!

CSS

              
                @charset "UTF-8";
/* CSS Document */

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

.row {
	margin: 1em 0;	
}

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

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

/* Centered */
centered.column, .centered.column:first-child {
	float: none;
	margin: 0 auto;
}



/*  % = (100 - #gutters) / #columns */
.one.column, 
.one-whole.column { width: 100%; }
.one-half.column { width: 49%; } /* 100% - 1 gutter = 98% / 2 columns = 49% */
.one-third.column {	width: 32%; } /* 100% - 2 gutters = 96% / 3 columns = 32% */
.two-thirds.column { width: 66%; } /* (32 * 2) + (1 * 2) = 66% */
.one-fourth.column { width: 23.5%; } /* 100% - 3 gutters = 94% / 4 columns = 23.5% */
.three-fourths.column { width: 74.5%; } /* (23.5 * 3) + (2 * 2) = 66% */
.one-fifth.column {	width: 18.4%; } /* 100% - 4 gutters = 92% / 5 columns = 18.4% */
.two-fifths.column { width: 38.8%; } /* (18.4 * 2) + (1 * 2) = 38.8% */
.three-fifths.column { width: 59.2%; } /* (18.4 * 3) + (2 * 2) = 59.2% */
.four-fifths.column { width: 79.6%; } /* (18.4 * 4) + (3 * 2) = 79.6% */
.one-sixth.column {	width: 15%; } /* 100% - 5 gutters = 90% / 6 columns = 15% */
.one-seventh.column {	width: 12.5714%; } /* 100% - 6 gutters = 88% / 7 columns = 12.5714% */
.one-eighth.column {	width: 10.75%; } /* 100% - 7 gutters = 86% / 8 columns = 10.75% */

/* 12 col grid */
.one-twelth.column		{ width: 6.5%; } /* 100% - 11 gutters = 78% / 12 columns = 6.5% */
.two-twelths.column 	{ width: 15%; } /* (6.5 * 2) + (1 * 2) = */
.three-twelths.column 	{ width: 23.5%; } /* (6.5 * 3) + (2 * 2) = */
.four-twelths.column 	{ width: 32%; } /* (6.5 * 4) + (3 * 2) = */
.five-twelths.column 	{ width: 40.5%; } /* (6.5 * 5) + (4 * 2) = */
.six-twelths.column 	{ width: 49%; } /* (6.5 * 6) + (5 * 2) = */
.seven-twelths.column 	{ width: 57.5%; } /* (6.5 * 7) + (6 * 2) = */
.eight-twelths.column 	{ width: 66%; } /* (6.5 * 8) + (7 * 2) = */
.nine-twelths.column 	{ width: 74.5%; } /* (6.5 * 9) + (8 * 2) = */
.ten-twelths.column 	{ width: 83%; } /* (6.5 * 10) + (9 * 2) = */	
.eleven-twelths.column 	{ width: 91.5%; } /* (6.5 * 11) + (10 * 2) = */	
.twelve-twelths.column 	{ width: 100%; } 

/* Offsets */	
/* width of columns + gutter */

.offset-by-one-half							{ margin-left: 53%; }
.offset-by-one-half.column:first-child		{ margin-left: 51%; }
.offset-by-one-third						{ margin-left: 36%; }
.offset-by-one-third.column:first-child		{ margin-left: 34%; }
.offset-by-two-thirds						{ margin-left: 70%; }
.offset-by-two-thirds.column:first-child	{ margin-left: 68%; }
.offset-by-one-fourth						{ margin-left: 27.5%; }
.offset-by-one-fourth.column:first-child	{ margin-left: 25.5%; }
.offset-by-three-fourths					{ margin-left: 78.5%; }
.offset-by-three-fourths.column:first-child	{ margin-left: 76.5%; }
.offset-by-one-fifth						{ margin-left: 22.4%; }
.offset-by-one-fifth.column:first-child		{ margin-left: 20.4%; }
.offset-by-one-twelth						{ margin-left: 10.5%; }
.offset-by-one-twelth.column:first-child	{ margin-left: 8.5%; }
.offset-by-two-twelths 						{ margin-left: 19%; }
.offset-by-two-twelths.column:first-child 	{ margin-left: 17%; }
.offset-by-three-twelths					{ margin-left: 27.5%; }
.offset-by-three-twelths.column:first-child	{ margin-left: 25.5%; }
.offset-by-four-twelths						{ margin-left: 36%; }
.offset-by-four-twelths.column:first-child	{ margin-left: 34%; }
.offset-by-five-twelths						{ margin-left: 44.5%; }
.offset-by-five-twelths.column:first-child	{ margin-left: 42.5%; }
.offset-by-six-twelths						{ margin-left: 53%; }
.offset-by-six-twelths.column:first-child	{ margin-left: 51%; }
.offset-by-seven-twelths					{ margin-left: 61.5%; }
.offset-by-seven-twelths.column:first-child	{ margin-left: 59.5%; }
.offset-by-eight-twelths					{ margin-left: 70%; }
.offset-by-eight-twelths.column:first-child	{ margin-left: 68%; }
.offset-by-nine-twelths						{ margin-left: 78.5%; }
.offset-by-nine-twelths.column:first-child	{ margin-left: 76.5%; }
.offset-by-ten-twelths 						{ margin-left: 87%; }
.offset-by-ten-twelths.column:first-child	{ margin-left: 85%; }
.offset-by-eleven-twelths,
.offset-by-eleven-twelths.column:first-child	{ margin-left: 93.5%; }


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

/* Mobile */
@media (max-width: 767px) {
	/* FLUID w/o columns (stacked) */
	.row {
		margin: 0;	
	}
	.column,
	.column:first-child,
	.centered.column, 
	.centered.column:first-child,
	.offset-by-one-half,
	.offset-by-one-half.column:first-child,
	.offset-by-one-third,
	.offset-by-one-third.column:first-child,
	.offset-by-two-thirds,
	.offset-by-two-thirds.column:first-child,
	.offset-by-one-fourth,
	.offset-by-one-fourth.column:first-child,
	.offset-by-three-fourths,
	.offset-by-three-fourths.column:first-child,
	.offset-by-one-fifth,
	.offset-by-one-fifth.column:first-child,
	.offset-by-one-twelth,
	.offset-by-one-twelth.column:first-child,
	.offset-by-two-twelths,
	.offset-by-two-twelths.column:first-child,
	.offset-by-three-twelths,
	.offset-by-three-twelths.column:first-child,
	.offset-by-four-twelths,
	.offset-by-four-twelths.column:first-child,
	.offset-by-five-twelths,
	.offset-by-five-twelths.column:first-child,
	.offset-by-six-twelths,
	.offset-by-six-twelths.column:first-child,
	.offset-by-seven-twelths,
	.offset-by-seven-twelths.column:first-child,
	.offset-by-eight-twelths,
	.offset-by-eight-twelths.column:first-child,
	.offset-by-nine-twelths,
	.offset-by-nine-twelths.column:first-child,
	.offset-by-ten-twelths,
	.offset-by-ten-twelths.column:first-child,
	.offset-by-eleven-twelths,
	.offset-by-eleven-twelths.column:first-child { margin: .25em 0; }
	
	/*single stack all */
	.one.column,
	.one-half.column,
	.one-third.column,
	.two-thirds.column,
	.one-fourth.column,
	.three-fourths.column,
	.one-fifth.column, 
	.two-fifths.column,
	.three-fifths.column,
	.four-fifths.column,
	.one-sixth.column,
	.one-seventh.column,
	.one-eighth.column, 
	.one-twelth.column,
	.one-twelths.column,
	.two-twelths.column,
	.three-twelths.column,
	.four-twelths.column,
	.five-twelths.column,
	.six-twelths.column,
	.seven-twelths.column,
	.eight-twelths.column,
	.nine-twelths.column,
	.ten-twelths.column,	
	.eleven-twelths.column,
	.twelve-twelths.column {	width: 100%; }
	
	/*split even */
	.one-half.column.split {	width: 49%; margin: .25em 0 .25em 2%}
	.one-half.column.split:first-child {	margin: .25em 0}
	.one-fourth.column.split {	width:49%; margin: .25em 0 .25em 2%}
	.one-fourth.column.split:first-child, .one-fourth.column.split:nth-child(3) {	margin: .25em 0}
	.one-eighth.column.split {	width:49%; margin: .25em 0 .25em 2%}
	.one-eighth.column.split:first-child, .one-eighth.column.split:nth-child(2n+1) {	margin: .25em 0}
	
	
}

/* #CLEARFIX
================================================== */
/*From Chris Coyier CSS Tricks
https://css-tricks.com/snippets/css/clear-fix/ */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* DEMO STYLING */


/* #RESET
================================================== */                        
* {
	margin: 0;
	padding: 0;
}

/* #HTML5
================================================== */
header, section, footer, aside, nav, article, figure {
	    display: block;
}

/* #CLEARFIX
================================================== */
/*From Chris Coyier CSS Tricks
https://css-tricks.com/snippets/css/clear-fix/ */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%; /* 16px */
	line-height: 1.5em;
}

/*
Using a Traditional scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
	if base is 16:
	h1 = 48 pixels → 48 ÷ 16 = 3 em
	h2 = 36 pixels → 36 ÷ 16 = 2.25 em
	h3 = 24 pixels → 24 ÷ 16 = 1.5 em
	h4 = 21 pixels → 21 ÷ 16 = 1.3125 em
	h5 = 18 pixels → 18 ÷ 16 = 1.125 em
	h6 = 16 pixels → 16 ÷ 16 = 1 em
*/
h1, h2, h3, h4, h5, h6 { margin-bottom: .5em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 3em; line-height: 1.15em; }
h2 { font-size: 2.25em; line-height: 1.2em; }
h3 { font-size: 1.5em; line-height: 1.25em; }
h4 { font-size: 1.3125em; line-height: 1.3em; }
h5 { font-size: 1.125em; line-height: 1.35em; }
h6 { font-size: 1em; line-height: 1.4em; }

/* #Paragraphs 
================================================== */
p { 
	margin-bottom: 1.25em; 
}

/* #Links
================================================== */
a { color: #39c; text-decoration: none;}
a:hover { color: #39c; }


/* #Lists
================================================== */
ul, ol { 
	margin: 0 0 1.25em 0; 
}

ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}

li {
	margin: 0 0 0 1.875em;
}

/* #Images
================================================== */
a img {
	border: none;
}


/* LAYOUT/GRID
===================================== */

/* See the grid CSS file */


.grid .column {
	background: #ccc;
}

.grid section p {
	text-align: center;
	margin: 0;
	padding: .5em;
}

/* SITE SPECIFIC CSS
===================================== */

header {
	margin: 1em 0;
	padding: 1em 0;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

header h1 {
	margin-bottom: .25em;
}

header p.tagline {
	color: #999;
	font-size: .6em;
	line-height: .6em;
	text-transform: uppercase;
}

.content section {
	margin: 1em 0 0 0;
	padding: 1em 0 0 0;
	border-top: 1px solid #ddd;
}

.byline {
	color: #999;
	font-size: .6em;
	line-height: .6em;
	margin-top: -2em;
	margin-bottom: 2em;
	text-transform:uppercase;
}



footer {
	margin: 1em 0;
	padding: 1em 0;
	text-align: center;
	border-top: 1px solid #ddd;
}

/* #Download Button
================================================== */

.downloadbutton {
	margin: 0 auto;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
.downloadbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
	color: #000;
}
.downloadbutton:active {
	position:relative;
	top:1px;
}









              
            
!

JS

              
                
              
            
!
999px

Console