Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Amritpal Singh
Amritpal Singh
838 Points
Posted by Amritpal Singh
Amritpal Singh
838 Points

What is Grid System in CSS?

I want to know What is Grid System, Why is it used and How to decide the number of columns?

1 Answer

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

A grid system provides a systematic way to organize web pages into rows and columns. Many grid systems work in units of 12 -- that doesn't mean you'll use 12 columns on a page, but that you can create columns that work in multiples of 2, 3, 4, or 6. So if you wanted 2 equal width columns, you could add two 6-unit wide <div> tags. Or you might want one wide, and two thinner columns, so you could have one 6-unit wide column and two 3-unit columns.

To learn more you should check out the Grid Layout section of the new CSS Layout Techniques course http://teamtreehouse.com/library/css-layout-techniques

You can also see how 2 CSS Frameworks -- Twitter Bootstrap and Foundation -- implement grid systems in our framework basics course: http://teamtreehouse.com/library/framework-basics