Grid View

Quick reference

• 00:05 In this video, I wanna talk about the grid system, and
• 00:08 the grid system is the key cornerstone to all responsive design.
• 00:11 Before we talk about that, though,
• 00:13 I wanna come back here to our, I created this new responsive page.
• 00:16 And you see the first thing I did was,
• 00:18 I added this new meta tag up to the head document.
• 00:20 It's meta name, viewport, content width = device-width, comma, initial-scale 1.0.
• 00:27 This tag goes on every page you ever wanna make responsive.
• 00:31 It doesn't matter what kind of website you're building,
• 00:33 you need to put that on there.
• 00:34 So that's the first thing you always do with responsive step,
• 00:37 is add this viewport tag.
• 00:39 Next let's talk about the grid system.
• 00:40 So this is the HTML, and I'll put this in the documentation, to create our page.
• 00:45 And it's very simple,
• 00:45 I just created a div with class row, and a couple of other divs.
• 00:50 One menu and one is col-9, what are these col-9s and col-3s?
• 00:56 Well that's where we're gonna get into the grid system.
• 00:58 So here is our responsive site, and
• 01:00 if I pull up this image here, this is the grid system.
• 01:03 Imagine chopping this thing into 12 equally sized pieces.
• 01:07 Now this image is not really great, I didn't do this to scale to make each of
• 01:11 these slices exactly the same size, but you get the idea.
• 01:14 They're all supposed to be the same size and there's supposed to be 12 of them.
• 01:16 And 12 is just the standard unit that we've come up with.
• 01:20 So whenever you think about creating your layout, you wanna think in
• 01:24 terms of these grids, so if there's 12 of them, how big are they?
• 01:28 Well I can pull up a calculator here and say 1 divided by 12, so
• 01:34 0.08, we times this by 100 to get a percentage, we go 8.3%.
• 01:39 So each one of these columns is 8.3%.
• 01:42 So when we're creating our CSS and we create widths, we'll put the width as 8.3,
• 01:47 so just remember that.
• 01:48 So what is two of these, well, two of them would be 16.6, or 8.3 times 2.
• 01:55 Three of them would be 8.3 times 3, times 4, times 5, times 6.
• 01:59 So, what am I talking about here?
• 02:00 So, let's come back here, I created a new responsive style sheet, and
• 02:04 I've defined all these columns.
• 02:06 And you can see, one column is 8.33%, two columns is 16.6,
• 02:11 three columns is 25, 33, on down to 12, which is 100.
• 02:16 So this may not be making a whole lot of sense, but if you wanted to make something
• 02:19 that took up the whole size of this, you would give it a call span of 12.
• 02:23 You would put in a class with a col-12, and that would take up all this space.
• 02:29 If you wanted to take up from here to here,
• 02:32 that's 11 columns, you would put that in a col-11.
• 02:35 Going back to our sheet here, I want the menu on the left, this thing,
• 02:41 to take up three columns, and then I want this to take up nine columns.
• 02:46 9 plus 3 is 12, so this is important because when we start moving these things
• 02:51 around, it becomes important to have everything gridded out.
• 02:55 And so it's a little weird, but it's really not that bad.
• 02:58 So what I've done is, I just created CSS for each of these.
• 03:01 Now I want each of these to float left,
• 03:05 because we want everything in our grid to float, and we want it to float left.
• 03:08 And then I want each thing to have a padding of 15.
• 03:11 So instead of putting these two things in each one of these,
• 03:14 I just did this, you can group all of these together.
• 03:17 So every one of these will have these two elements inside of them.
• 03:22 The last thing I did is, I gave this box sizing, border-box, and I put a star here.
• 03:27 And that means every single CSS selector,
• 03:30 every single CSS thing we do, will have this box sizing thing set to border-box.
• 03:35 And that's just a thing we need to do when you're dealing with grid systems and
• 03:38 mobile designs.
• 03:38 The grid design, just remember, sort of in your brain,
• 03:42 chop your screen into 12 equal parts, and each one of those is 8.3%.
• 03:47 And total, the 12 parts equal 100%, and anytime you wanna build something,
• 03:52 you're just gonna wrap it in the number that you want.
• 03:56 So col-9 is nine of these slices, col-3 is one, two, three of these slices.
• 04:03 You can see it's not really lining up because I did a bad job drawing these
• 04:05 lines on here.
• 04:06 But you can, you get the picture.
• 04:07 So that's the grid system, and we're gonna get into more of this in the next video.

Lesson notes are only available for subscribers.