Preview
Video Player
00:00
00:00
Creating Fluid Grid Columns with calc()
8:22Learn how to create fluid grid columns with calc(), using multiplication and division operators.
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