kailoon.com Tutorials . Comic . Web Design . Freelance . Blog

MyCSS Grid System

This is my first attempt to create my own CSS Grid System – MyCSS Grid System. I notice that there are a few useful CSS Grid System out there but it is a shame while I never use them. I know it is useful and especially when you work for a company. They prefer to have all this thing well documented. It us good for company future development.

Why I Create This While I Can Download Others?

I am so stubborn, I don’t want to follow others! ( just kidding ). I notice that most of the CSS Grid System have lots of extra classes of elements. It is good and handy but is it really useful for your project? So, I try to create a very simple CSS Grid System just for blog or small website. So, this can be a little different from what you see in other popular framework. You can find all popular css grid system from the Grid System Generator.

Introduction

MyCSS Grid System is using the maximum of 960px width. It comes with the most common layout proportion for blogs and creative web sites. It is also using the best divine proportion in web design. This may not that useful compare to those well built css grid system but I think it somehow do the job.

How It Works?

In the download files, there are:

• index.html
• grid.css
• format.css

You can start coding your project by including the grid.css.

Codes Preview

The grid.css, I am using my name as the first and the last div (Easy to remember, every time you use this system, you will remember my name! Hehe.. So, the first div from the left has a class name “kai”, the last div on the right will has a class name “loon”. So, “kailoon to complete the work!”.

* { /* CSS reset, you can replace with your own css reset codes*/
	margin: 0; 
	padding: 0;
}

.b1 { width: 640px; }
.b2 { width: 300px; }
.b1 .b1 { width: 310px; }
.g1 { width: 580px; }
.g2 { width: 360px; }
.g1 .g1 { width: 280px; }
.g2 .g2 { width: 170px; }

.col {
	float: left;
	margin: 0 10px;
	display: inline;
}

.box {
	margin: 0 auto 20px;
	width: 960px;
}

.kai { /* The first left component*/
	margin-left: 0;
}

.loon { /* The last right component*/
	margin-right: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

The HTML:

<div class="box clearfix">
		<h1>960px - Normal Blog Layout</h1>
		<p>960px</p>
</div>

<div class="box clearfix">
	<div class="col b1 kai">
		<p>640px</p>
	</div>
	<div class="col b2 loon">
		<p>300px</p>
	</div>
</div>

<div class="box clearfix">
	<div class="col b1 kai">
		<div class="col b1 kai">
			<p>310px</p>
		</div>
		<div class="col b1 loon">
			<p>310px</p>
		</div>
	</div>
	<div class="col b2 loon">
		<p>300px</p>
	</div>
</div>

<div class="box clearfix">
	<h1>960px - Golden Divine Proportion Layout</h1>
	<p>960px - The Golden Divine</p>	
</div>

<div class="box clearfix">
	<div class="col g1 kai">
			<p>580px</p>
	</div>
	<div class="col g2 loon">
			<p>360px</p>
	</div>
</div>	

<div class="box">
	<div class="col g1 kai">
			<div class="col g1 kai">
				<p>280px</p>
			</div>
			<div class="col g1 loon">
				<p>280px</p>
			</div>
	</div>
	<div class="col g2 loon">
			<div class="col g2 kai">
				<p>170px</p>
			</div>
			<div class="col g2 loon">
				<p>170px</p>
			</div>
	</div>
</div>	

Conclusion and Download

It is simple and easy to use as it is very specific. The CSS file size is extremely small, only 778 bytes!. You can preview the demo here. If you have any questions or you find any bugs or you have any suggestions, please feel free to leave a comment. If you find this useful, let me see how / where you implement it. Thanks!