Creating Fluid Grid Columns with calc()8:22 with Guil Hernandez
Learn 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
You need to sign up for Treehouse in order to download course files.Sign up