Grid-system

When I started out on Treehouse, the concept of grid system absolutely baffled me. I didn't know what they did or how I should use them. I tried getting answers from forums, but honestly no one was able to give me a satisfactory answer. So I did some experimenting on my own along with some examples I could find on blogs and finally understood how I could use them to my advantage, and believe me, once you know to use them, they cut down dev time like crazy! I don't know if my answer is going to help you, but I'll try my best :)

The number of columns you need really depends on the project, but for the most part, I feel a 12 column grid system works best. Why you ask? Let's take for example the 960 grid system found at www.960.gs. The 12 column grid uses 12 columns (lol, duh!) each of 60px wide with a gutter of 10px on either side which adds up to a total page width of 960px (60px x 12 columns + 20px x 12 colums,optimal for websites). Now what the **** is a gutter??!! The gutter is nothing but the spacing b/w 2 consecutive columns. This allows for a nice even layout between grids. So let's say you wanted 4 columns in your site to display 4 different products, you could use the 16 column grid where by each column would have a width 240px thereby giving you 4 larger columns when compared to the 12 column grid system which would give you the same 4 columns but with each column width set to 180px. (Because a 16 column system uses a total page width of 1280px with gutter of 10px on either side while the 12column system only has a max page width of 980px, thereby decreasing each column size, in this case).What kind of column system you're going to use finally comes down to you. Either 12 or 16 is OK.

Now how do you use a grid system? The 960 grid system uses classes such as .grid_1, .grid_2 so on and so forth. When you use one of these classes on, lets say a 'div' element, that element takes on the width provided to that class. So in the 960 grid system, .grid_1 has a width of 60px, .grid_2 has a width of 120px and so on. So based on the layout that you want, you could assign different classes to the 'div' elements thereby laying out the web page/site very cleanly without any trouble.

Hope that my answer cleared your doubts to some extent :) I'm always ready to help, feel free to email me : vijay(dot)rangan(at)gmail.com

People usually stick with 12 columns. But you can do more or less it really depends on your layout. Let's say your website is a single page. It's set up to be a blog so you have the main content, side nav, and a footer. It's just really basic. You would just need to have one grid for the whole page, then one for the main content, the one for the side nav. The content can use padding or margins to center and images in the content can use CSS to align left or right.

Their is a company called gridsetapp.com that offers custom grids like this. I use them all the time for my projects. But you can use your own or a framework. I've just learned from past projects that keeping things as simple as possible is best.

Very nice and useful tool http://grids.heroku.com/

Usually there is something inside of the grid that determines what the height is. If you use content then the height depends on how much content you have. If you use an image then the height is the height of the image. If you decide to add a class to a div then you can tell it how much you want it to be. You basically have the freedom to make it whatever the layout requests.

Hey this is great. Grids have also been something I have been trying to get my head around. While I understand the maths behind the 12 columns grid system and how that affects the width of the different div on your website I dont get what controlled the height of each div. The way I understand the grid system, is you started off with your first div, the container and all the other divs that you have constrained to different column width fit inside. Like a Russian babushka doll. So do we have more code that we need to use to specify the height of each div in terms of our grid do we have rows?How do you set the heights in comparison so your photo and text are adjacent?

Thanks. Didn't realise that the rows were preset. Its cool that everything is customisable. Its exciting how much there is to learn. I found this link which I found pretty helpful for understanding the skeleton of a grid http://www.creativebloq.com/design/building-modern-grid-system-5122962