Grid system

The grid is just a helpful way of laying out your website so that the content is vertically lined up. Sites like gridulator allow you to choose the amount of columns you need to work with (The more columns the more precise you can align things but it might complicate things too) , though you still have to create the stylesheet to use the grid measurements that have been calculated for you. The gutter is used to create negative or white space between each column. If you want to take up a full row then you would want the content to span how ever many columns you have made for your grid system.

For example grid of 12 from Smells Like Bakin':

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

target / context = result

 */
.grid_1 { width: 6.5%; } /* 65px/1000px = 0.065px */
.grid_2 { width: 15%; } /* 150px/1000px =  0.15px */
.grid_3 { width: 23.5%; } /* 235px/1000px = 0.235px */
.grid_4 { width: 32%; } /* 320px/1000px = 0.32px */
.grid_5 { width: 40.5%; } /* 405px/1000px = 0.405px */
.grid_6 { width: 49%; } /* 490px/1000px = 0.49px */
.grid_7 { width: 57.5%; } /* 575px/1000px = 0.575px */
.grid_8 { width: 66%; } /* 660px/1000px = 0.66px */
.grid_9 { width: 74.5%; } /* 745px/1000px = 0.745px */
.grid_10 { width: 83%; } /* 830px/1000px = 0.83px */
.grid_11 { width: 91.5%; } /* 915px/1000px = 0.915px */
.grid_12 { width: 100%; } /* 1000px/1000px = 1 */

/*  each grid size is the (base size * column count) + gutter 

ex:  for grid 3 (65px * 3) +  20px  =    235px or 23.5% after dividing by the max size of 1000px

*/

Let's say you are working with this grid that has 12 columns (just like the Smells Like Bakin' website). Now for the first row you want just a div with a picture on the left and a div with the header on the right. If you want the image to take up less space than the image-say 4 columns, and have the header fill the rest, you want to set the class for the image div to grid_4 and the header div to be grid_8.

Omega and alpha are used to set the left and right side margins to 0 keeping everything flush to the sides of the browser window. Always remember that Google is your friend for situations like this as well as [Stack Overflow](http:stackoverflow.com). Also for more information on grids, gutters, and omega/alpha properties check out this grid tutorial I found for you. Good luck!

Check out this short (3 min) introduction to CSS grids.

Small typo. in the head it should be html </head>

Can I ask one or two more questions? (Hopefully I can explain correctly)

When you want to implement a boiler plate and different files to a site, how do you "href" that?

....If I have more then one project in my text editor open(One is named "index.html" the other "projectname.html") ... and I want to implement some css coding (I have two css files open also, nothing appears in folders on my sublime text editor though... everything is its own tab... one is "style.css" the other is "style1.css")

...since everything is in the same editor is all css code going to be applied to both sites im working on when I hit save? If I want to keep separate do I do "href=style1.css" for one and "href=style.css" for the other?

I don't think I'm understanding the background of the items and links that go into the< head >and where they are pulling information from... where things always remain the same, where they change and why... are certain things universal like index.html and these hrefs and types? Or do they change? Is that the origin of eventually importing scripts and boiler plates etc?

Sorry if I'm not exactly clear on how to ask the things that are confusing me. I understand the code but I want to understand the concept to make sure I'm clear. Thanks.

Jason, I have actually never used a boiler plate or a css framework. It is on my soon to do list but I've been focusing mainly on learning wordpress, php, python etc. If I were you I would post a new forum question about that. There should be many people available here to answer that for you, unfortunately I currently don't posses the background for that yet. Hope you can figure it out man!

Figured it out, what I actually needed to know were the very basics... I guess I accidentally started my lessons on building a website thinking that was the first thing without realizing I skipped over the part that explained the origin of things I was confused about it... My confusion was in linking src= to external files and understanding where to save everything to have access to them... Thank you for all your help!

Oh ha that is quite a bit simpler! Glad you figured it out!