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
Peter Winfield
1,205 PointsGrids Elude Me
<p>Hi all, I've been working through my Web Designer Track and have been following along with Smells Like Bakin' to a successful conclusion. However before I delved into the Deep Dive of HTML I wanted to create a similarly simple Website using my own images and content etc.</p> <p> Problem is the Grid Section totally went over my head. I have a good idea of what they are, however from following along I just inserted classes as instructed and the layout just worked.</p> <p> I am happy to use a template grid and I'm not too concerned about making my own just yet for this simple project but I honestly don't have a clue how to position all of my elements using a grid. Is there a simple explanation of how I do this and how it works?</p>
3 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsA grid is a framework for precisely positioning elements on a webpage.
Your Smells Like Bakin' website uses a 12-column grid, dividing the width of the container div into twelve columns of equal width. You can't see the columns, but they're there.
By applying the class of .grid_3 to an element, you're telling the element to span over three columns. If you've used Microsoft Excel, it's like merging three cells together. Similarly, a class of .grid_6 will tell the element to span six columns.
The .alpha and .omega classes are used to align elements to the left and right sides of the container, respectively. You see, the grid comes with default margins, but we don't want the outer margins for the first and last elements of the page because they break up the flow a bit. Applying .alpha and .omega will get rid of those margins.
In addition, because of those default margins, the last element in a row will get bumped down if you don't add .omega to it, since its right margins can't fit inside the container.
EDIT: Clarified a few things, mostly about the alpha/omega margins.
EDIT 2: Laura made some really good points about the alpha/omega classes; her post below explains it a lot more clearly than mine does.
Laura Nielsen
7,200 PointsHehe funny, I was just going through this bit for the first time in the Build a Simple Website. I had a tough time getting my head around the omega too.
I think I have figured out the numbers behind your explanation Peter. If I am wrong - please correct me!
In grid.css: grid_8 has a width of 660px; grid_4 has a width of 320px. We want two divs to occupy one row with one having the class grid_4, the other grid_8. Together that makes 980px. However, later in the code, css tells the browser to add an additional 20px right margin to each of the grid elements. That equates to 1020px, hence, why the second div gets pushed to the next row. So, if we add omega to one of the divs, it will reduce the total width to 1000px, allowing for both divs to be within the same row.
Is that the correct logic? Thanks!!!
Peter Winfield
1,205 PointsAwesome explanation! I have no authority to say if it's correct but it makes sense and explained clear. Treehouse should employ you guys!
James Barnett
39,199 PointsThat's my understanding of grids
Peter Winfield
1,205 PointsThanks for the help. So basically say I'm using a 12 column grid along one row I want a bit of main content and a bit to the side. I just apply a class of say 8 to the main content and 4 to the side content, then add an omega class to the side content to make sure it doesn't get pushed down due to margins?
Ryan Duchene
Courses Plus Student 46,022 PointsExactly!
Ryan Duchene
Courses Plus Student 46,022 PointsCouldn't have said it better myself. Great job!
Peter Winfield
1,205 PointsThanks mate helped a bunch!