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
Marcus Tisäter
4,886 PointsBuilding CSS Grid System
Hello everyone,
I'm having difficulties understanding the CSS Grid System. First of all, I'm very used to all this positioning stuff by my own on pure CSS coding. Now I like this GRID css thing because it will easily modify my job for me. Now I look through the videos of it, but I still don't seem to get it.
First of all, how do you build you own CSS Grid System? They said in the video that Alison did it. Second and not least, how does everything positioned themselves with no position value. It seems wired because positioning values like absolute and relative. I mean everything on this system is based on widths and margins. What about the other values like height, padding etc.. I don't seem to get how nicely everything gets position out without these values.
Can someone please explain the CSS Grid System in a more detailed way? I want to try build one on my own to my website.
Thanks!
3 Answers
Paul Graham
1,396 PointsBuilding a CSS grid is a great way to get your hands dirty with layout and positioning. It can also be very complex if you don't understand exactly the way things work. Try examining some of the existing grid systems out there to see how they work. I'd recommend Bootstrap since it's so widely used.
I know you're probably not onto CSS preprocessors, but what grid systems are actually doing code-wise is more clear in preprocessor code - ex: https://github.com/twbs/bootstrap/blob/master/less/grid.less
You give a div or element a column CSS class and that determines the width, ie how many columns it takes up. You then position it right or left by using the push or pull helpers for x number of columns.
Padding and height are irrelevant to a grid system. Think for a moment how a grid looks. This is a 4 column example.
page edge || column 1 | margin | column 2 | margin | column 3 | margin | column 4 || page edge
Padding is pointless here because I have gutters separating the columns, and THAT'S what sets how things are spaced horizontally. I actually want no padding because I want the element to align with the grid. Vertically, that's a different problem anyway. There's no easy way to do vertical layout in CSS but you can easily throw a clearfix on a container div for an entire row of content.
So when I'm sizing, I design for the element to take up 2 columns. I can then give the 2 column class to the containing div, and then if I want to push it center, use a push-1-column class to push it left one. Grid systems provide amazing flexibility but you also have to keep the grid in mind while designing. You should actually be doing this anyway.
My guess is that you might be too confused with the box model and how to space things in general right now to be worried about layout grids. Grids are incredibly useful for creating responsive sites and web properties in general but if you didn't design around a grid, you're trying to fit a square peg in a round hole.
Keith Wyland
10,576 PointsHi Marcus T ,
I answered a similar forum post previously and figured I would just share a bit of that here in hopes it will help you.
From this forum post (dealt a little more with frameworks):
I don't think grids are as hard as they are made out to be. Many frameworks have figured out how to deal with a bunch of browser compatibility issues or spacing issues, and these make grids look hard to build from scratch. But the basics aren't too difficult. Plus, speaking from a bit of experience, building a grid from scratch will give you that much more of an understanding of how CSS and HTML work together.
Relating to grids, I would recommend reading and watching Chris Coyier's blog post and screen cast called Don't Overthink It Grids over on CSS Tricks. Chris does a great job debunking the myth that the basics of a fluid CSS grid is hard. He shows how you can build one from scratch using floats.
If you decide to go further down the grid rabbit hole after that, I've made a mashup of sorts using Chris' grid tips along with csswizardry's (Harry Roberts') grid system, that you could maybe draw inspiration from.
Marcus Tisäter
4,886 PointsThank you guys for all the answers! It really helped me out!
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHey Marcus T,
The simple grid Nick & Allison created for the project is a basic example of a grid framework. Let's go over the process – hopefully it helps :)
Before Allison designed the site in Photoshop, she exported the grid png to use as a guide in her design (based on the parameters she chose). Then, her design elements were laid out according to the grid.
The total width of the design grid was 1000px and made up of 12 columns – each 65px wide with a 20px margin between each column (except for the first and last column).
In the css file, 12 ".grid_" classes were created – each representing a combination of column widths and margins. So for example, .grid_1 has its width set to 65px, or 1 column width. Then, .grid_2 is set to 2 column widths plus a margin: 65 + 65 + 20 = 150px. The .grid_3 class does the same for 3 columns of the grid, and so forth...
Once you have the grid in place, it's really simple to lay out your pages based on the columns you've set. For example, say you have 2 divs in your HTML: one is the main content div and the other is the sidebar. You can give your main content div the class ".grid_8" to take up 8 column widths, then give your sidebar div the class ".grid_4" to take up the remaining 4 column widths.