New terms from treehouse – CSS Layout Techniques Part 3 – Grid Layout

Grid Layout

Understanding Grids A grid allows us to lay out our design elements and content in a simple yet versatile way, because all of the alignment, positioning, floating, even the clearfix, is already built into the grid system. And it’s usually responsive, so it’s able to adapt to any device or viewport size. The layout should be thought of as a set of rows and columns. Rows are what contain the columns and keep the grid in place. Columns keep things nicely aligned to the grid. Screen Shot 2014-06-30 at 2.34.53 PM The grid itself is determined by some css like margins, widths, etc that you write ahead of time. First, we’ll determine the max number of columns we want in the grid, in this case 12. We need fixed pixel widths to determine how wide each of those should be, in this case 65px. Keep in mind that columns can span the width of multiple columns as long as they don’t exceed the max number of columns in the row. Screen Shot 2014-06-30 at 2.38.21 PM Columns also have margins aka gutters that separate them from adjacent columns. We’ll give all but the first column in our grid a 20px left margin.


Creating Fluid Grid Columns We want to use percentages for setting up the columns rather than fixed lengths, so that it can respond based on the viewport size. If you add up 12 columns at 65px each, and 11 20px left margin gutters (because the first one doesn’t have one), that gives you a total of 1000px, and we can do some math to figure out the percentage. Our first target column width is the first column that doesn’t have the left margin gutter, and is 65px, divided by our context of 1000px, gives us .065. To make that a percentage, move the decimal over by two, giving us 6.5%. Then, we’ll do how much width two columns would be, which includes the gutter between them as well, which is 65 + 65 + 20 = 150 /1000 =  .150 x 100 =  15%. Lastly, we’ll do one for the width of three columns. 65 + 65 + 65 + 20 + 20 = 235px /1000 = .235 x 100 = 23.5%. You would then go through and do this for all of them, up to twelve which is the highest number we want. Screen Shot 2014-06-30 at 2.52.26 PM Notice .grid-12 is our max-width, which spans across the whole grid. Now anytime we want a column to span a certain number of columns, we can give it the appropriate class.


Creating the Grid Container Next we’ll create a new class .grid-container and give it some padding and margin to center it. Screen Shot 2014-06-30 at 2.59.02 PM Then we need to set up the styles that will layout the columns in the grid container. We use a child selector for child elements of .gird-container with a class that starts with “grid-“, so any of the ones we created early. We’ll give them a float:left;, and since we’re using floats, a min-height to prevent them from horizontally collapsing. We’ll add some padding, then some margin. Earlier, it was decided that the left margin would be 20px, and to make that a percentage we divide by the total width 1000px, which gives us .020, then x 100 to give us 2%. Screen Shot 2014-06-30 at 2.59.02 PM Now, we don’t want the first column to have a margin-left, so we’ll set the margin of the first column to 0. We’ll select it using a :first-child pseudo-class. Screen Shot 2014-06-30 at 3.05.57 PM Lastly, we’ll make it so the last column always floats right, so it’s always flush with the right side of the page. Screen Shot 2014-06-30 at 3.06.34 PM Now, we’ll need to do a clearfix to clear our floats, so the grid container won’t collapse. So, we’ll add it with an :after pseudo-element to build it into our grid. Screen Shot 2014-06-30 at 3.10.04 PM


Testing Our Grid Now that all that’s set up, we can plug in some of these grid classes. We’re starting with this: Screen Shot 2014-06-30 at 3.13.11 PM First, we’ll use them in our header. We’ll start by creating a div with the class “grid-container” to wrap it. Screen Shot 2014-06-30 at 3.15.14 PM Next, we’ll make it so the logo spans 2 columns and the main-nav spans 8. Screen Shot 2014-06-30 at 3.16.31 PM Screen Shot 2014-06-30 at 3.16.18 PM We’ll then give the .main-nav a text-align of right. Something is wrong in my test file I can’t figure out so I’m using theirs.

Screen Shot 2014-06-30 at 3.23.16 PM Screen Shot 2014-06-30 at 3.22.48 PMNext we’ll do the columns. We’ll give the containing div the class .grid-container, then give the child divs the appropriate grid classes. We’ll have them total to 12 columns, making them nicely take up the whole width.

Screen Shot 2014-06-30 at 3.25.45 PM Screen Shot 2014-06-30 at 3.25.19 PM

 

To add a new row of content, simply repeat the process and give the parent div the class .grid-container and the child divs the grid class based on how many columns you want it to take up.

Screen Shot 2014-06-30 at 3.28.49 PMScreen Shot 2014-06-30 at 3.28.34 PMNow, we’ll want to prevent our layout from getting too wide on larger viewports widths. We’ll add a new media query for that, and make it so that if the screen is at least 1200px wide, the .grid-container’s max width will be 1100px. Just like a normal wrapper we’ve done a bunch of times before.

Screen Shot 2014-06-30 at 3.31.20 PMScreen Shot 2014-06-30 at 3.31.44 PM

Next, we’ll create a visibility class that hides elements in mobile devices with a preexisting media query. We’ll add a new class called .hide-mobile and apply it to the elements we want to hide on smaller viewports.

Screen Shot 2014-06-30 at 3.34.59 PM  Screen Shot 2014-06-30 at 3.34.51 PM Screen Shot 2014-06-30 at 3.34.46 PMScreen Shot 2014-06-30 at 3.35.13 PM

And just like that, I’ve finished the CSS sections. I can’t believe I finally got this far. I started the treehouse courses on April 11, 2014, and now, just 80 days later, I’ve crushed the lessons and am onto Javascript. When I started the CSS foundations it seemed almost impossible, so much to learn and go through. I’m really proud to have gotten this far, but there’s still a ways to go.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s