Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.2 hours
Grid 3
  • Overview
  • Transcript

2.3 Fixed, Fraction and Auto Values

When specifying the width of your grid columns, post-css accepts three types of values: absolute, fractions, and auto. In this lesson you’ll learn how to use all three, and how to effectively combine them.

2.3 Fixed, Fraction and Auto Values

Hey, welcome back to Grids and Layout Tricks with postcss-ant. In this lesson, we're gonna go through the different types of values that you can feed into the columns method and how postcss-ant handles those values. For the purposes of this tutorial, I just made a little tweak to the grid that we produced in the last lesson. So, I've just added another two divs into our grid, so go ahead and do that yourself as well. And then, into our grid I've added these values. So we've got four columns, the first is 50 pixels, the second is 5rem, the third is 1 quarter and the fourth is auto. So that gives you a little demo of the three different types of values that you can use. You can use fixed values which can be any type of valid CSS fixed value like pixels or rems. You can use fractions like 1/4, and you can use auto. Now there are two things that you need to think about when you're deciding how you're gonna use these values. The first is the order of operations. So, basically, postcss-ant is trying to figure out how to split up a row into columns according to the values that you've provided. So you need to know what order it operates on those values in order to create your layout. The second thing that you need to think about Is making sure that you choose values in the right way that they fill up the row entirely. If you have a little bit of space left over on the end, then you'll get columns from the next row coming back on to your previous row and you don't want that. So, first, let's talk about the order of operations. Postcss-ant's order of operations is Fixed, then Fractions, then Auto. So first, any fix with value columns they're gonna be inserted, so in our example here, our 50 pixel column will be added in, in our 5rem value column. So that's all the fix with values in our column set up here out of the way, then it will move on to the fractions. And this quarter here is not a quarter of the available width of the whole row. It's a quarter of whatever is left after those fixed width columns have been inserted. So you've got your whole row, you subtract that 50 pixel column, you subtract the 5rem column and then this fraction value is a portion of whatever is left. So now the fixed values are done, and the fractions are done, postcss-ant will move on to the auto values. And auto is just whatever's left after those fixed and fraction values have all been subtracted from the overall width of the row. If you have more than one auto value, then whatever is left would just be divvied up equally amongst those auto values. Now if that sounds a little confusing at the moment, don't worry because we're gonna step through some examples to illustrate each of these things in action. All right, so now, let's take a look at what I mentioned was the second thing that you needed to think about and that is making sure that all of your values come together to fill up the entire row. So, let's see what happens if we make all four of our columns 50 pixels wide. And you can probably guess what's gonna happen. That 50 pixels per column is now gonna add up to enough width to fill up the whole row. So let's see. Sure enough, our first four columns are only taking up about half the row which is letting the next four columns come back up onto the first row filling up that left over space. So how can we fix this? Well, there's a couple of ways. On the one hand, you can't just create a grid that is the exact width of the sum of all your columns in gases but generally speaking, you wanna have more fluidity than that. So, if you wanna use fixed values, the best thing to do is combine them with either fractions or the auto keyword. You'll remember that the auto keyword is the remainder of whatever amount of space is left in the row after the fixed and fraction columns have been subtracted. So, the easiest way for us to fix this problem here is to just take one of these rows, and turn it into an auto row. There we go, so now the fourth column in each row is just filling out the amount of space that's left, and this is a good opportunity to demonstrate another thing that I mentioned earlier. And that is if you use multiple auto values, whatever's left in the row is just gonna be split equally amongst those auto values. So, let's copy this one and place that in as the width for a second row. So now you can see every second and fourth column are identical widths. Each one of those is an equal portion of whatever is left after out to 50 pixel columns have been subtracted, and that brings us to another way that we can solve that problem of how to ensure that your entire row is filled when you're using columns with fixed width values, and that is fractions. You can see that the columns that we have, the auto value applied to, each one is taking up a half of the remaining space. So, if we wanted to, instead of using auto, we could replace both of these with half. Because we know that fractions come after fixed values in the order of operations, we know that each one of these columns is going to take up half of the remaining space, in basically exactly the same way as our auto values did. So now if we save that, you can see there's no change because it's working in the same way. So the thing to be aware of if you're gonna combine fractions with fixed width values, is to make sure that the fractions that you have add up to one whole number. So if I change this third column also to one half and then I total all of my fractions, I've got one and a half here, that's too much. So, let's see what happens. So that's totally thrown our grid out. So if I wanted to have three fraction based columns here, what I could do instead is have each of them be 1/3. There, now that works nicely again. These fraction columns don't need to be the same fraction each time as long as they all add up to one. So instead, we could have a half, a quarter, and a quarter, and that still works just fine. So, now there's just one last thing to point out and that is that it doesn't matter what order the different types of values you have are in your columns method, the order of operations is still gonna execute the same way. So, let's go back to our original set of values. So we've got our two fixed width values, our fraction and auto. And, we can change these around any way that we place. So, we can put auto second, and we can put a quarter first, and it's still exactly the same. You still have these values being pulled out first, then the fraction, then order. So, changing the order, all it does is influence which columns are affected by those values but they'll be calculated in exactly the same way. And I should also mention that if you are combining fractions and fixed values, I said that you need your fractions to total one and to not exceed one. However, if your fractions total less than one, then you can also just add an auto value. So you can see that that's what we have with our values here. We've got our fixed width values, then we've got a fraction, obviously a quarter does not equal one by itself, but that doesn't matter because we're using the auto value to fill up the remainder. So, that is kinda what you need to know about the different types of values that you can use and the order of operation and making sure that your columns fill up your rows. So far you've been working just with the widths of your columns. So you might be wondering about how you control their heights, and that's what we're gonna cover in the next lesson where we're gonna look at the rows method, so I'll see you there.

Back to the top