<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* GRIDIFY - a simple page grid system */
/* based a twelve column grid */
/*  sample markup */ 
/*
	&lt;div class="wrapper"&gt;
		&lt;div class="row"&gt;
        	&lt;div class="col gf4of12"&gt;&lt;/div&gt;
        	&lt;div class="col gf4of12"&gt;&lt;/div&gt;
        	&lt;div class="col gf4of12"&gt;&lt;/div&gt;
		&lt;/div&gt;&lt;!--end col row --&gt;
	&lt;/div&gt;&lt;!--end wrapper --&gt;
*/
/* OVERVIEW
	A "wrapper" div encloses the entire layout, and a "row" div encloses each set of "col" (column) divs 
	Add appropriate "x_units" (e.g. "three_units") classes to each col div to set the number of grid rows it spans
	Units must total 12 for each row
	
	If you need the details...
	1. CREATE THE COLUMNS IN EACH ROW OF YOUR LAYOUT 
	Create a "wrapper" div
	Enclose at least one "row div" inside it
	Enclose 1 to 12 "col" divs inside the "row" div
	Add "col" class to each col in the row and a class that define its units (the number of grid cols it spans)
	You can use any number of divs but the applied "unit" classes must add to 12
	For three equal width cols, create three "col" divs and add the "four_units" class to each col
	e.g. "four_units" x 3 = 12 units wide 
		    three_units &amp; seven_units &amp; two_units = 12 units wide = three different width columns
	
	2. ADD INNER CONTAINER DIVS
	Add a div inside each column with the class "container"
		The containter takes L &amp; R margins to provide space between the colummns
	&lt;div class="row"&gt;
        	&lt;div class="col gf4of12"&gt;&lt;div class="container"&gt;&lt;/div&gt;&lt;/div&gt;
        	&lt;div class="col gf4of12"&gt;&lt;div class="container"&gt;&lt;/div&gt;&lt;/div&gt;
        	&lt;div class="col gf4of12"&gt;&lt;div class="container"&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;/div&gt;&lt;!--end col row --&gt;
	(three equal columns)
	
	DO NOT SET WIDTH ON THE CONTAINER DIVS! ...they will automatically expand to fill the columns.
	Then you can add margins, borders, and padding to them without affecting the width of the layout
	
	3. ADD YOUR CONTENT
	Add your content inside the container divs
	
	&lt;div class="row"&gt;
        	&lt;div class="col four_units"&gt;
				&lt;div class="container"&gt;
						&lt;!--  add content markup here --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
        	&lt;div class="col four_units"&gt;
				&lt;div class="container"&gt;
					&lt;!--  add content markup here --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
        	&lt;div class="col four_units"&gt;
				&lt;div class="container"&gt;
					&lt;!--  add content markup here --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			
	ENJOY! 
*/

/* start of gridify */
#wrapper  {padding:.8em;}

.row       {width:100%; overflow:hidden;}
.col        {float:left;}
/* 12 column grid */
.gf1of12   {width:8.3333%;}
.gf2of12   {width:16.6666%;}
.gf3of12   {width:25%;}
.gf4of12   {width:33.3333%;}
.gf4_5of12{width:37.4%;}
.gf5of12   {width:41.6666%;}
.gf6of12   {width:50%;}
.gf7of12   {width:58.3333%;}
.gf8of12   {width:66.6666%;}
.gf9of12   {width:75%;}
.gf10of12 {width:83.3333%;}
.gf11of12 {width:91.3333%;}
.gf12of12 {width:100%;} 

/* ten column grid */
.gf1of10 {width:10%;}
.gf2of10   {width:20%;}
.gf3of10   {width:30%;}
.gf4of10   {width:40%;}
.gf5of10   {width:50%;}
.gf6of10   {width:60%;}
.gf7of10   {width:70%}
.gf8of10   {width:80%}
.gf9of10   {width:90%}
.gf10of10 {width:100%}

.container      {overflow:hidden;}
/* end gridify */

/* check your grid markup! */
/* add class "demo" to the wrapper to see the containers */
/* let your content set the container heights in your site - don't explicitly set height as I have done for this demo */

.demo {
	margin:10px auto;
	border-radius:4px;
	background:#9C6;
}

.demo .container {
	height:200px; /* height is set for this demo only - see comment above */
	margin:4px;
	padding:4px;
	border:1px solid #AAA;
	background:#DDD;
	border-radius:4px;
}
.demo .container .container { /* nested */
	height:40%; /* height is set for this demo only - see comment above */
	margin:4px;
	padding:4px;
	border:1px solid #AAA;
	background:#DDD;
	border-radius:4px;
}
.demo footer {
	width:300px;
	margin:5px auto;
	font: 10px Tahoma, Geneva, sans-serif;
	text align: center;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}
</pre></body></html>