Learn how to size columns and rows.
- [Tutor] Besides using absolute values to define the width of a column and the height of rows, there are other options. The word, auto tells the columns to take up all the available width, I'm going to go over here in the code and on line 12, grid-template-columns: auto auto auto and then save and go over here and refresh. So the extra space is equally divided between the three columns, that means the extra space is equal, but the columns are not, because the first column has much wider content.
We can also give only some of the columns an auto width, so I'm gonna go over here and change auto auto auto to 100 pixels for the middle column and then save and refresh and there, that middle column is 100 pixels, with the other two dividing the leftover space evenly. The CSS grid, we have a useful new unit of measurement called the fr, which was created just for grid, the letters F-R stand for fractional unit. What the fr does is it allocates any free space that's left over after creating all the other columns that we gave a specific width to, but unlike using auto, it doesn't divide up the free space evenly, it divides up the columns or rows evenly as long as there is space to do so.
So for example, going back to the code on line 12, if we have that 100 pixel column in the middle and want the other two to split the remaining space evenly and be at the same width as columns, I'm gonna change these autos to 1fr, so 1fr space 100 pixels space 1fr, save, go back here to the left and refresh. So you can see that it's different, now column one and column three are the same width, but the fr unit actually does a lot more. If we change the numbers that go along with fr, that changes the fraction of the space each is taking up, if we change this third column to 2fr over here in the code and keep the other at 1fr and I go to refresh, now the column that's 2fr is twice as wide as the column that's 1fr and together, they're still taking up all the available space.
If you wanna think of it like fractions, add up all the fr numbers, in this case one plus two equals three and that's the denominator or the bottom number of your fraction, so the 1fr is one-third and the 2fr is two-thirds, you can get more complicated if you want. So let's go over here and change these three numbers for the columns to 1fr, 3fr and 9fr, if you add the fr numbers together, one plus three plus nine is 13, so 1fr is one-thirteenth, 3fr is three-thirteenths and 9fr is nine-thirteenths, so I'm gonna save and refresh.
So that's not exactly the result I got, if the first column is 1fr and the second column is 3fr, you might think it should be three times as wide, but it's not, that's because when you're using fr, at first make sure there's enough space for the content, if the first column is really only one-thirteenth, then there wouldn't be enough space for the word's responsive layout, so make the column just wide enough to fit the content and then size the other columns accordingly. But the other two columns, one is 3fr, another is 9fr, so that one should be exactly three times as wide as the other and it is, you can also do this with the height of rows.
Going back to the code, I'm going to go to line 13 and get add grid-template-rows: 2fr 1fr and 3fr, save and refresh. Since we didn't give the grid a specific height, the rows aren't looking to take up available space, as they did with the columns, instead the row that's 1fr is only the height required by the content, that is it's not given any extra space, then the other rows are based on the height of the 1fr row, the top one, which is 2fr is twice as tall and the third one is three times as tall.
If we give the container height and try again, I'm gonna go to the code on line 14, do height of 90vh for the grid container, save and refresh. Now you can see that all the rows take up the full height of that grid container together, this last row doesn't have any height defined, so it's only as tall as it needs to be to fit the content and the other three rows are proportional, based on their fr unit. One more thing is that if you have multiple columns with the same width, you can use repeat, so that you don't have to list each one.
So going over to the code, under grid-template-columns, I'm gonna delete those three values and type in repeat and then parentheses, inside of that, four, 125 pixels, so the four is how many times we want it to repeat, 125 pixels is the width of each repeating column. I'm gonna save, go over here and refresh, so now I have those four columns of 125 pixels wide. You can also repeat groups of columns, they don't all have to be the same width, so under repeat inside the parentheses on row 12, I'm going to do two, and then 70 pixels 1fr and save, so it's going to repeat two times, but each repeat will be two columns of 70 pixels and 1fr for a total of four columns, so going over here to refresh and then I get that.
You can also add more columns in addition to the repeat by separating them with spaces, just like you normally would for multiple column.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox