Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video, we'll learn how to make our grid columns fluid by converting the pixel values to percentages.
Quick Reference
 Pixel to percentage formula:
target / context = result
Related Videos

0:00
So in the previous video we determined the amount of columns we want along with the

0:06
column amd gutter width. So we want 12 columns at 65 pixels each.

0:12
And we'll need 11, 20 pixel wide gutters worth margins.

0:18
So that gives us an overall width of 1000 pixels.

0:21
That's a nice round number to work with, that's easily divisible by the numbers

0:26
we want to use for our columns and gutter. Since we'll be converting them to

0:31
percentages, because we want to make our grid completely fluid.

0:37
So 1000 pixels won't be the fixed width of our grid.

0:41
We'll just use that number as our width context, when we convert the column

0:46
width and gutter into percentages. Okay, so let's start creating

0:51
our grid.

0:52
First let's determine the width of one column in percentages.

0:59
Now, to do that I'll bring up the handy calculator app, and we'll use the target

1:06
divided by context equals result formula, commonly used in responsive web design.

1:13
Now, we won't need a gutter for just one column,

1:17
so our target width for one column is

1:22
65 pixels. Now 65 pixels, divided by our

1:27
context of 1000 pixels gives us

1:32
0.065. Now when defining these as

1:37
percentages, we'll always need to move the decimal point two slots to the right.

1:42
Which is essentially multiplying our result by 100.

1:45
So that turns into 6.5 percent, so now we have

1:49
our percentage value for the width of one grid column.

1:54
So let's create a class for it, we'll go into

1:57
our grid.css file which is already linked to the HTML document.

2:03
And inside the Media Query underneath this columns are 65 pixels wide

2:08
comment flag, we'll create a class for one grid column.

2:13
So let's say grid one and we will give it a width

2:17
property And we'll use the percentage value, we just came up with which

2:25
is 6.5%.

2:26
Okay so let's figure out the width

2:29
percentage for two columns, and one gutter.

2:33
So back to in our calculator here.

2:35
65 plus 65 gives us, 130 then we'll add 20 for the

2:45
gutter, and that gives us a total of 150. We'll divide

2:50
that by our context of 1,000 and

2:56
we get 0.15 or 15%. So, let's go back

3:02
into our grid.css file, and we'll create a Grid class, for two columns.

3:08
So it will say grid2 for our new class.

3:11
And we'll give it a percentage width value of 15%.

3:17
So let's do one more.

3:18
This time we'll do the total widths of three columns.

3:22
So let's create a Class for that. We'll say grid three.

3:28
And when we have three columns, it will need to have two gutters.

3:33
So we know that the width of two columns and one gutter is 150 pixels.

3:40
So let's start with

3:42
that 150, and we'll simply add 65 pixels

3:47
for the third column, and then we'll add 20 pixels

3:53
for the gutter. So that gives us 235 and when we divide

3:58
that by our context of 1,000. We get 0.235 or

4:02
23.5%. So back in our grid.css file, we will

4:08
add a width property to the grid 3 rule, and

4:13
we'll give it the percentage value 23.5%.

4:19
Now, I have already done the math for our remaining columns,

4:22
so we're not gonna sit here and calculate every single one.

4:24
So I'll just go ahead and paste them, below the three we've just created.

4:30
And if we scroll all the way down to the bottom, to this

4:33
grid12 class.

4:35
This is our max width, which spans a

4:38
column across all twelve grid columns, or 100%.

4:44
So now, anytime we want a grid column, to

4:47
span the width of a certain number of columns.

4:50
We can give them any of this grid classes, and it will take care of

4:54
the column layout for us, as long as the total number of columns add up

4:58
to a max of twelve columns.
You need to sign up for Treehouse in order to download course files.
Sign up