Menu

Lab Entry

Columns and Grid CSS Generator

Here you will find the CSS needed to build fully responsive percentage based column and a grid system using minimal HTML markup. The code below is fully tested and compatible with IE8+ and the most recent versions of Firefox, Chrome, Opera, and Safari. To use, simply copy and paste the generated CSS below into your stylesheet.

The beauty of this column/grid system is that there are no set widths required. It is a pure percentage based system that grows or shrinks to size based on the parent container or browser viewport.

Generator

/* --- Column/Grid Styles Start --- */

.row {
	margin: 0 -1.5%;
	padding: 0;
	clear: both;
}
.row:after {
	content: '';
	display: table;
	clear: both;
}
.row > [class*="col-"],
.row > [class*="grid-"] {
	float: left;
	clear: none;
	margin: 0 1.5% 3%;
	padding: 0;
	list-style: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.col-full { width: 97%; }
.col-12 { width: 47%; }
.col-13 { width: 30.333%; }
.col-23 { width: 63.666%; }
.col-14 { width: 22%; }
.col-34 { width: 72%; }
.col-15 { width: 17%; }
.col-25 { width: 37%; }
.col-35 { width: 57%; }
.col-45 { width: 77%; }

.grid-12 { width: 97%; }
.grid-11 { width: 88.666%; }
.grid-10 { width: 80.333%; }
.grid-9 { width: 72%; }
.grid-8 { width: 63.666%; }
.grid-7 { width: 55.333%; }
.grid-6 { width: 47%; }
.grid-5 { width: 38.666%; }
.grid-4 { width: 30.333%; }
.grid-3 { width: 22%; }
.grid-2 { width: 13.666%; }
.grid-1 { width: 5.333%; }

/* --- Column/Grid Styles End --- */

Usage

Usage is easy. Simply create a parent element with the class “row” and place children elements with classes “grid-” or “col-” inside the parent. For example:

<ul class="row">
    <li class="col-13">
        Content here will be in a column that is 1/3 (33.333%) width of parent container
    </li>
    <li class="col-23">
        Content here will be in a column that is 2/3 (66.666%) width of parent container
    </li>
</ul>

Difference between “col-” and “grid-“

The basic difference is that “col-” represents fractional column spacing while “grid-” is based on a 12 grid (default) layout. For the fractional columns, “col-23”, for example, represents a column that is 2/3 the width of the parent container. As for the grid based columns, these are spaced out by 12 (default) columns. So “grid-8”, for example, would create a column that stretches across 8 grid spaces.


Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2018 Ninesphere.com - Chicago Web Design & Development