Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to create fluid grid columns with calc(), using multiplication and division operators.
Resources
Related courses
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So far you've learned how to use
the plus and minus operators and
0:00
calc expressions to control an element's
width, height, and background position.
0:03
Now you're gonna learn how to
create fluid grid columns with calc
0:08
using multiplication and
division operators.
0:11
You'll often use a grid framework, or
0:15
layout tool,
to help you define fluid grid columns.
0:17
But it's also common to build your own.
0:20
Building fluid grid columns
requires calculations
0:23
that determine a column's
width value in percentages.
0:26
So you're gonna see how simple it is
to define these calculations with CSS.
0:29
And you can follow along in Workspaces by
clicking the Launch Workspace button on
0:35
this page.
0:39
So in the workspace the index.html file
has a div container with the class row.
0:40
Now the row has three nested
divs containing some content.
0:48
So we are going to style these three
divs as fluid horizontal columns.
0:53
I'm going to create a 12 column grid
I can use to lay out my content.
0:58
And each column will have
a percentage based width value.
1:02
Now we could do a little math to figure
out each column's width value in
1:06
percentages.
1:10
For example, I can use my calculator app
to determine the width of one column
1:11
in the 12 column grid
by dividing 100% by 12.
1:16
And after moving the decimal
over two spaces to the right,
1:19
I know that the width value for
one column is 8.333333%.
1:25
And to determine a fluid width for
two columns I can
1:31
calculate 100% divided by 12 times 2.
1:36
And if I move the decimal over two spaces
to the right the result is about 16.7%,
1:41
and I can keep using this method for
all 12 columns.
1:46
Now, this long percentage values may not
seem all that intuitive at first and for
1:50
some it may not be clear exactly how much
space each column takes up inside the row.
1:54
So can we do this math with CSS and calc?
2:00
Sure we can.
2:03
I'm gonna use calc to define fluid
width values for each column.
2:04
I'll open up style.css and scroll down
to this calc styles comment here.
2:08
And right below the comment I'm going to
create a rule that defines the width for
2:15
one column in the grid.
2:20
So I'm going to write the class col-1.
2:22
And then I'm going to define a width
property, and I'll use calc as the value.
2:25
So to calculate the width for
one column in the grid,
2:32
I'll use the expression 100% / 12.
2:34
So notice how I'm using the same math
the I used earlier in the calculator app
2:39
when I was trying to get
the width value for one column.
2:44
And the grid will have 12 columns,
2:47
so this column will take up
one-twelfth of the grid space.
2:49
Next, I'll create the CSS rule for
two columns, so
2:53
I'll write the class col-2,
add a width property and
2:58
calc, and I'll calculate a fluid width for
3:04
two columns with
the expression 100% / 12 * 2.
3:08
So this will take up
two-twelfths of the grid space.
3:13
Next I'll create one right below for
3:17
three columns with a class col-3.
3:21
I'll once again adding width property and
use the calc function and the value.
3:25
And to define a fluid width for
3:33
three columns I'll use
the expression 100% / 12 * 3.
3:35
And to create the rest I'll go ahead and
copy the col-3 rule, and
3:41
I'll paste it below three more time.
3:45
And I'll change this one here to col-4 and
3:48
then the expression will be 100% / 12 * 4.
3:52
I'll change the next one to col-5.
3:58
Then change the expression to 100% / 12
* 5 and I'll change the bottom one to 6.
4:01
So, as you can see, these expressions
make understanding the proportions and
4:10
width of the column a little easier.
4:14
So I'm going to stop at six columns,
but you don't have to.
4:17
So, feel free to add columns 7 through
12 by following this pattern here,
4:20
all the way up to col-12.
4:26
You can also check the final code in
the project files for this workshop.
4:28
So next I'm going to
float my columns left and
4:32
add column gutters with left and
right padding values.
4:37
So I'll scroll up to the top
of all the column styles and
4:39
I'll use an attribute selector to target
all classes beginning with col dash.
4:44
So it's going to target all
the column classes we just declared.
4:52
So inside this new rule I am
going to say float left then add
4:59
a padding property, and
the value will be 0 for the top and
5:04
bottom and for the left and
right padding values.
5:09
I will use the value 1rem.
5:13
All right, so
my simple grid columns are all set.
5:16
So now I am going to use some of
the column classes in the HTML
5:20
to layout my content.
5:25
So first I'll scroll down and
give the first
5:26
development nested inside
the row the class col-6.
5:31
So this one will span six columns.
5:36
Then I'll scroll down and give
the second development the class col-3.
5:39
And let's make the third
one col-3 as well.
5:47
So, I'll save the index file and
refresh the browser.
5:52
And as we can see, the first
column takes up six grid columns,
5:56
while the second and third take up
the space of three grid columns.
6:00
So let's go back and
try a few other classes.
6:07
So I'll scroll up and
change the first one to col-5.
6:09
I'll make the second one col-4 and
I'll keep the third one as col-3.
6:14
The layout's a little different.
6:20
The first column takes up
the space of five columns,
6:23
while the second one takes up four
columns and the third one three columns.
6:27
And it looks like the grid
layout needs some adjustment.
6:31
So to optimise the grid column layout for
small screens and mobile devices,
6:34
I'm going to place my column
classes inside a media query.
6:39
So right below the attributes
selector rule and
6:43
right above the col-1 rule,
I'll add a media query by typing @media,
6:47
and I'll use the min-width media feature
and define the value 769 pixels.
6:53
Then I'll add an opening curly brace and
7:00
at the bottom right below all my column
styles, I'll add a closing curly brace.
7:03
Next, the columns do not need a float or
left and right gutters in small screens,
7:14
so I'm also going to move the attribute
selector inside the media query.
7:19
So select, and cut it, and paste it as the
first declaration inside the media query.
7:25
All right, so let's take a look.
7:31
I'll save the stylesheet and
7:33
when we refresh the page we can see how
the columns are vertically stacked,
7:35
displaying content in a single
column on small screens.
7:41
But once the view port, or
device width, is 769 pixels or
7:45
wider, the columns are laid out
horizontally using our grid column styles.
7:48
As I'm recording this video, the calc
function is supported in all modern
7:55
browsers with a few known issues in IE,
Safari, and Firefox.
7:59
So before using calc in your projects,
be sure to check
8:04
a resource like caniuse.com to see
the latest in browser support.
8:07
Now, I encourage each of
you to experiment and
8:12
find creative ways to use the calc
function in your projects.
8:14
And if you come up with something awesome,
8:18
don't forget to share it with
the Treehouse community.
8:20
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up