On auto sizes in Grid Layout - Talk.CSS #55

• Hi, this is Hidde. And I’m stoked to be at Singapore’s Talk.CSS, an event that I’ve seen on the Twitters a lot. And it’s pretty cool to be part of that. I was in Singapore physically about 10 years ago around the same time in October, and yeah, I love to be back at some time, but sadly, this thing is going to be virtual, but that’s fine. We are gonna be virtual and we are going to be talking about something interesting, Grid Layout. And what I want to talk about specifically is what happens when you size things in integrated data? Because when I teach workshops, people are often surprised by how sizing works in Grid Layout and why things get as big or as small as they do. So with that, let’s get started. I’m Hidde as I said, I am a freelance front-end developer, and accessibility specialist from Rotterdam in the Netherlands.

01:00 - This is a photo of Rotterdam in much nicer weather than it is today. It’s been rainy out. If you are in the Netherlands, please do visit. I also have a blog which is on hidde.blog, a new URL I registered recently and I’m on Twitter as well as @hdv. Now, why don’t we talk about designing things? And we usually also have to talk a bit about the canvas we design on and people who do print design, like Wim Crouwel designed these beautiful posters, a Dutch print designer, he was assigned to do posters for things like museums. And he was asked, do you want to do it as poster? Then they would tell him what size the poster would be, or maybe he would ask whatever, but he would have a fixed canvas to work with.

01:50 - So he would know beforehand what his canvas would look like and designers of that time, and designers later on, they took advantage of that by designing grid systems that would specifically be based on a paper size. They would divide that paper size into boxes and cells and tracks. And with that, create their beautiful designs. We have no such thing on the web. We don’t have a fixed canvas. We don’t have something like fixed paper sizes, like A4 and B2, so we don’t have these numbers standardized as much as maybe we would have liked to on the web, but still we can do very exciting things with web technology. The supermarket near me, and I guess supermarkets around the world do this.

02:37 - Now uses TV screens to advertise stuff instead of posters. So every once in a while, they refresh it, like every week they’ll have new things with their on special and then put them on these posters. And I think the general design of the posters, maybe the grid of the poster were very much stayed the same, but of course the pictures and the text is going to change. Now, this is something that marketeers on the marketing blog have explained and said, it’s going to be more relevant and more local outreach to their customers. That’s marketing speech for, okay, we are very happy with our screens, but all I could think of when I saw that these things were going digital is that this could use some CSS.

03:20 - You could actually use CSS on screens, just as well as you could write CSS for browsers, you can write CSS for screens and maybe these posters could be made very reusably with some HTML and from CSS, but not the marketeers, they thought about outreach instead. That’s fine. But I think these digital posters are one way that we could really take our web technology to different places. Because if we’re honest, the web was designed on screens, that looked a bit like this, this is Tim Berners-Lee next to the computer that presumably ran the first website. And what’s interesting about this picture, I think is that we still have the web. We can actually still even access that website, but we can do it on completely different devices from this one, none of our computers look like this anymore, yet we can still access that same web.

04:16 - We can access the web now on our fridge, we can have the web in our cars. We can have the web on our phones and in the tube, or we could be somewhere at an office and use some fixed desktop computer, what we consider our couch. We can use it pretty much everywhere. Now the web is everywhere, and we have infinite canvases, unlike the print designers who had these fixed canvases, which almost sounds a bit boring. We’ve had to design for all of these different canvases. And on the web, we have more things that are very far right, like languages that the web can be displayed in, and also with that, lots of different writing systems.

04:58 - So, the web is a very exciting platform to be working for. Locally we have a language that is here to help, CSS is here to help because it knows that the web has all these languages and all these writing systems and it can help us develop stuff for them. So I want to look a bit at terminology first, because the terminology is important to understand what sizes things get. First time, I want to talk about this distinction between block sizes and inline sizes. And then it has to do with directions that they go into.

05:30 - So the block direction is the direction in which block elements go. So when we add a new paragraph to our page or an image that is a block element, that is the direction that new paragraphs would be placed in. So a block still go from top to bottom and inline elements go from left to right in a line. So each word that is added to a page is added in the inline direction, in this case, from left to right, but I’m saying in this case, because this is only the case if we use left to right and top to bottom layouts, which has long been a default on the web, but in recent times, CSS has kind of been adapted to work with different kinds of layouts. So there is the writing modes module that looks like all these different writing systems.

06:21 - So we have the Latin-based writing system that was for a long time the default on the web. So text goes from left to right and block elements go from top to bottom. But as the writing mode specifications explains, there are more writing systems out there. There is a Mongolian-based writing system that has the blocks flow from left to right, and inline going from top to bottom, then there are Han-based systems like Chinese, which can have their block direction from top to bottom and then the inline direction from left to right, or it can have the block direction from right to left and the inline direction from top to bottom. And then there’s Arabic systems where an inline direction is from right to left, and the block direction is from top to bottom.

07:07 - And there’s all these different writing systems. And it would be really cool if the web automatically adapted for that and there is CSS invented for that. And a great primer on that is Hui Jing’s post vertical type setting with writing mode revisited, where as we looked at an older example that’s created and then opens in again she goes from frowny face to scare face, to angry face to disappointed face in just five minutes. In this post she explains kind of some stuff, that she encounters when he tries to use writing modes on the web. But one conclusion I drew from this is that a vertical type on the web is still quite tricky to get right.

07:49 - I quote, “Unfortunately 10 minutes into the attempt, I broke my brain.” So this means something, if Hui Jing breaks her brain, I’m sure many others will as well. So at this point, not all of writing mode will work as easily as you might expect, especially if you’re trying to use pictures and things that are not texts, but that’s fine because trying to work with writing modes and understanding writing mode is still very useful. If you want to understand CSS Grid and Flexbox as Jen Simmons explains in her posts, CSS writing modes on 24 ways. If you understand that these writing modes have different directions and that we have this block direction and inline direction, and the kind of awry between different writing modes, all of a sudden, it makes a lot more sense that we have things like aligned self start or aligned self and rather than left or right, or top or bottom.

08:43 - So these writing modes, they are useful in order to understand how things like alignment work in CSS Grid Layout or Flexbox. Now writing modes, they can be set in CSS as a property. So there’s writing mode with property, and then you can use the values horizontal-tb, which is top to bottom, vertical-rl, vertical right to left, vertical left to right. And then there’s two properties for sideways and are kind of meant for interesting creative type of graphic effect. Not so much when you save the languages. So let’s look at sizing now. And for that, I want to look at three different sizes.

09:24 - First, the grid container, then grid tracks, and then at last, I want to look at grid items. So how big they can all become. So we’ll start with the grid container. You can create a grid container by setting display: grid on any element, any old div or section. Then if you put that onto a page, cross the section element, which is a block element, it’s going to take all of the size of the window. It’s containing element basically. Then if we put a div in there with display grid, it is going to take that exact same size because it takes the containing element size, which in this case is that section that took the size of the window. So that div is just gonna take that same size, it’s gonna take it from its containing element.

10:10 - If we set a width to the section, then the div inside of that, that grid is also going to have that same width. So we’ve set it to 500 pixels and that div is also going to have the 500 pixels. So the grid is going to be as big as its containing elements. Now, what we could do is set a float to that div element. But if we do that, we will find that its size is completely gone. We can no longer see it. The same happens when we set position absolute to that element. And what’s going on here is that when you use either floats or position absolute is that this element is only gonna take the space that it needs for the content that is inside of it. And because there is no content in there, it’s going to have no size at all. If we put something in there like hello world, and it’s gonna take exactly the size that is needed for those two words, for the words, hello world. So the grid container is gonna take the size of its containing element when the grid does not have an explicit way.

11:13 - It’s gonna take the size that the content needs when you use float or position absolute, or when you use an inline grid and it’s gonna take the size that you’ve specified when you’ve specified a size. So that’s how big your grid container is going to be in its inline direction. Now in the block direction, it seems a bit more straightforward. If you work with left and right text, you could have it become the size of the containing element, that’s when you use position absolute and a height of 100%. You could have it be the size that the content needs, and that’s whenever no of the exceptions apply.

11:49 - So usually it will be decided the content needs, or it can be the size that you specified, and that happens when you specified a size. Then let’s look at grid tracks now, grid tracks are basically columns or rows. They are collectively referred to as tracks. And we’ll mostly be talking about columns here. So if you wanna create columns in a grid, you can use the grid template, columns property, and then each of the values are separated with a space, each of them is more uncommon.

12:22 - So in this case, I’ve created three columns, in 100 pixels one, a 400 pixels one, and another 200 pixels one. So I’ve created three columns with this declaration. I can also create rows in the same way with grid template rows and then a number of sizes. So the most straightforward sizing for grid tracks is fixed sizing when we use any of the fixed sizing methods. So for instance, we could do something in centimeters, five, 10, and five centimeters.

12:50 - We could use pixels, or we could use a mixture of things like ems and rems and ch units. It doesn’t really matter, with fixed sizing, you are gonna get the size that you’ve asked for. And there are a lot of different sizing units that you could use and put into that grid template columns, or rows declaration. For instance, in relative sizing and absolute sizing. So relative sizing is relative to something, it can be relative to the font, like em and rem, ex and ch as well, or it could be relative to the viewport, like the viewport width unit, and the viewport height unit, vw and vh, and then there’s vmin and vmax, which refer to whichever part of the viewport is the biggest or the smallest.

13:33 - So vmin will be the percentage of that part of the viewport that is the smallest and vmax will be a percentage of that part of the viewport that is the largest. So if you have something that is in portrait mode then horizontal will be the smallest and vertical will be the largest. You can also use absolute sizing in centimeters, millimeters, the Q unit which I’ll explain in a minute, inches, picas, points and pixels, which all kind of come down to pixels except for pixels, that’s weird. Let’s look at what the spec says. So the centimeter is actually 96 pixels divided by 2.54, and we’ll get into why in a minute, millimeters are a 10th of that, and the Q is a 40th of that, then inches, an inch is 2.

54 centimeters, 14:25 - and it equals to 96 pixels, hands that have an issue for centimeters, then picas are a part of that and points are a part of that. And then pixels surprisingly are also a portion of the inches. So they all kind of interrelate together, and I assume that are good historical reasons for that. They had to fix something, I guess. So that’s what they ended up with. Now, in sizing primitives, Fantasai explains in her amazing talk for defining auto. Fixed sizes are sizes that are independent of layout or content.

15:02 - So all of these that I’ve laid out here, they’re all independent of content or layout, so they’re based on fonts, viewports or absolute things or each other. Now, if we defined some fixed track sizes, like in this case, I’ve defined a grid that has three columns. Each of them is three characters and a ch unit is actually a zero in the current font. So in this case, I can put three zeros in each of the columns and they’re gonna be perfectly, and they’re gonna perfectly fit there. And as you can see, the tracks are smaller than the grid itself.

15:38 - And so the grid itself, it goes all the way to the end of the edge of the viewport. But the columns are just gonna take up that size for those three characters. Now, what if I put something in there that doesn’t quite fit, like the word Singapore, it doesn’t fit inside that second div, because it only has space for three characters, and Singapore is much more than that. What will happen then, is that the text will kind of go underneath the third column because the third column is laid out later, so column on top, unless you play with that next. And that will happen, so the text will kind of go and flow into each other.

16:14 - And that’s what will happen if you set the fixed column size. So your column is going to be honored. It is going to be the size that you wanted it to be, but your text is maybe not gonna be the way that you wanted it to be, because now you can hardly read the word Singapore. There are different ways you can deal with this, you can use the overflow property in CSS to cut the text off. This may look prettier, but now you can no longer see the word Singapore. So it is less easy to read or you could do things like more from a scroll and yeah, at least sure that people can access the text there.

16:50 - So that’s what happens with fixed track sizes. Let’s look at some other ways you could do your track sizes, that might be smarter because they deal better with the content. Fractions that are not auto are ways to use the remaining space in a grid for certain tracks. So in this case, I have defined three columns. One is 50em, the last one is 10em, and then the middle one is 1fr, which means one fraction of the remaining space.

17:18 - Now, if we do that and we have no content, it’s going to look something like this. So we will have three kind of equal width columns, which is nice. I cheated a little bit because normally these wouldn’t have any height, so I entered the min height in my CSS, but this is what it will kind of look like. Until I add some words in there, like the word blijkbaar, which is apparently in Dutch. What you’ll see is that it will actually take up much more space than the others.

17:46 - So when you look at that grid definition, you might feel like, oh, great, these are three columns that look exactly the same or the same size because they are, or 1fr. But what is happening here is that grid is helping you make all your texts available and do the thing you probably want to have. So this is a default feature because usually you don’t want to have text on top of other texts. So if there would be those two zeros, than we have before, then the texting will go right on top or the word blijkbaar in this case, will go on top of the other texts, and you usually don’t go above that. So if you use fr units, it is going to prioritize display text to honor in your track sizes.

18:31 - So this is what it says in this back about that, the distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. So there are other sizing definitions that you’ve given. In our grid, we had a column on the left and the right that had some fixed text sizing. So it’s going to look at all the other sizes first. So it’s gonna put the word blijkbaar in there. It’s going to make sure that the column is big enough, and then it’s going to distribute leftover space. The total size of such rows or columns is subtracted from the available space, yielding the leftover space. And then leftover space is then divided among these rows and columns that have an fr unit in proportion to how big the fr unit is. So if you have 1fr, it’s gonna get half as much as something that has 2fr, so the proportions are also respected there. So fr units will take leftover space, but only after all of the other sizing functions have ran.

19:36 - Now we’ve gotten where blijkbaar there, and we’ve seen that it’s going to make our middle column much bigger than we actually expect it to be. And if you would have a cell right underneath that word, you’ll notice that, that is also going to be bigger, exactly the same size as the 140 word blijkbaar. And this confuses some people, but it makes all the sense in the world that it isn’t like half of that space because these grid lines that are in between columns and rows, they’re mark in one, two, three, here, they go down vertically in one straight line. So basically that, that thinks out has to be as big as the word blijkbaar because otherwise, that grid line would not go in a straight line, and so it would no longer be a grid. So to say so, yeah, it makes sense, but it is a bit confusing sometimes to people.

20:30 - So basically there’s this one word, one cell on the track can affect the whole track’s size. It makes sense if you remember that all of these cells are part of the same grid and so they influence each other, and that is a feature, but it can be a bit confusing at times. If you don’t want that to happen, so if you don’t want your track to prevent overflow, what you could do is use a min-max function, width as the max and fr unit, and as the min as zero, basically something like this. So you would have your grid template columns with 50 and 1fr, and then 10em, then the middle one is 1fr. And if you don’t want that one to grow based on the content, what you can do is use a minmax() function that has zero as its minimum, by default, the minimum for a column with fr will be auto, that is why that, that word blijkbaar actually was able to make our grid much bigger.

21:28 - And if we use zero there, that kind of behavior will not happen, but you’ll have the overflow problem that we saw before. And so it depends on what you want ready, but you can force this thing to not grow based on one word content. Then let’s look at another way to size tracks, do it with keywords. And there are a number of keywords available for the most common use cases. One is min content. So if you make all of your template columns min-content and they’re gonna be as small as they can possibly be.

22:02 - And this is based on the words that are inside of the column. If you had to summarize what min-content does, it basically takes as the size for this element, the size of the biggest word or the biggest bit of content that is inside of that. Now here I’ve used many very tiny words from the Dutch language, but if I add something really long, like minimumtemparaturen and it’s going to take that size up because the main content size, would then equal to that, the size of that word minimumtemperaturen, which means minimum temperatures, it’s one word in Dutch, and it is very long, 19 letters. And so it is going to take up that size and make the whole thing bigger. So if you use main content, it’s going to be the size of the biggest word in any cell in your track, in this case, everything that’s underneath, that will also become that wide.

22:59 - If you use max-content, it is going to try and lay out all of the words in one line, all of the content in one line, and then make that the size. So if you put a lot of words in your column, it is going to become very wide. Now, one thing that you can do is use fit-content, which does kind of the max-content behavior, but with a maximum. So it’s max-content with a maximum, in this case, I do fit-content 50 pixels. So I say, yes, become as big as the content needs, but don’t become bigger than 50 pixels.

23:35 - So that is something you can do with the fit-content. And then we go to auto track sizes. Now, if you have a grid and you can define columns, so you can give one of your column the auto keyword or multiple, but auto is also what you’ll get when you don’t size your tracks. So if you don’t add any definitions for your track sizes, you’ll also get auto-sized tracks, unless you use grid-auto-rows or grid-auto-columns, then those are properties that you can use to override auto as the default types. But if you don’t set the grid-auto-rows or grid-auto-columns, you are going to get auto as the default size for your tracks. So you define a grid, you don’t define any sizes, you are going to get the auto track size.

24:23 - Within grid tracks, there’s a minimum and a maximum for auto. Let’s look at the maximum track size first, basically the way that this is decided is looking at all of the grid items that are in that one track, you pick the one with the largest max content. Now that one will be your track size. So if I put the words, penne, spaghetti and farfalle into the cells, then clearly spaghetti is the longest word, and it’s also the longest faster, by the way. So it is going to take the track size of the desires that, that word needs. So it’s going to be as big as spaghetti. Now, if we put some other words that are like, kind of lonely, it is going to take the size of that track up to be as big as the word kind of lonely.

25:07 - So that is the maximum content size if you’re using old town, it will not get bigger than that. It will be as big as the largest metropolitan. And of course, max-content looks a bit different in reality, because you usually have much more than one word, but you’re looking for the largest thing that is in your track and that the track needs to hold. And that will be the biggest your auto row will become. Then the minimum size is the one with the largest minimum size.

25:33 - And that is going to be your track’s minimum size. And the largest minimum size is either the min-width or the min-height value. So whether you’re looking at rows or columns, and usually it is a bit like min-content. So the minimum that is needed to display the content. So that is gonna be the minimum size for an auto track. So it is gonna make sure that all of your words fit in. So if you have lots of words and one really long word, it’s gonna be that size of the long word, it’s gonna be at least as big as that biggest words, so the minimum size. It is a little bit more complicated. I’m saying you usually like min-content, if you look into the spec, it actually explains a couple of exceptions for that as well. So let’s look at how big grid tracks can become. Now, grid tracks are gonna be the size that you’ve specified when you’ve used fixed sizing units, relative ones or absolute ones. So that’s the most straightforward.

26:31 - If you’ve used the fixed sizing unit, then your track is just gonna be that size. When it’s gonna be a bit more than specified, that’s usually when there is a long word or another long bit of content that really needs to go in there, and you’re going to be perfect when you give the browser some flexibility. So when you’re using some keywords, when you’re using fractions, or when you use auto, you basically let the browser decide how big something needs to become. And just like with table layout, that can be a clever strategy because usually you don’t know what the content of a webpage is going to be, because maybe it will have a CMS or something. So it might make sense to leave the details to the browser and make sure that the browser ensures that all the text is readable and that nothing overflows.

27:18 - And then the last sizing I want to look at is the sizing of grid items. Now, grid items are the things that you place onto the grid and they go into grid cells. Now, grid item size actually depends on alignment and alignment is what happens when you have more space than content. And it’s basically what happens on this slide. So I have this, the sentence here, and then underneath, I have a bit of space left, so what I could do with some alignment, like I could put it on the bottom and then the remaining space will go to the top, or I can put it in the middle, and the remaining space will go both at the top and at the bottom.

27:54 - So alignment is basically what will happen if it has more space than content. Also, it can only happen if you have more space than content. So if you have as much content as space, like I tried to do in this slide, I put so many words on that, it takes up all of the available space, then there’s nothing to redistribute. So there is nowhere for white space to go, so we will not be able to align this, at least not vertically, because there are no space at the top or the bottom. So yeah, we cannot move this to the top or to the bottom.

28:30 - Even if we tried, it would look no different, even if we tried, and if the browser would honor those properties for this text, there will be no different visually. Of course, in this case, there is some inline alignment possible, like I could put it in the center or do the ride because there is some space horizontally. So alignment is what decides the size of grid items. Let’s say we have this grid with four items in it and we’ve put these items in and we’ve not set any alignment. Now what will happen if we give a background to these items is that we will see how big the items actually are because they’re only, there’s only one word in each of the cells.

29:10 - We don’t know if the item is actually as big as the cell or as big as the word, if we turn the background to these paragraphs, then we will be able to see how big they become. It looks like this. So with the blue background, we can see that actually these items are all as big as the cell that they are in. And the reason for that is that the default alignment is stretched. So all of the white space is being used. And so stretch alignment is basically alignment from top to bottom, or from left to right, taking up all the space available in the direction that the grid goes. It’s basically using all of the space that is available.

29:52 - Now, if we use something else than stretch, for instance, we aligned to the start or we aligned to the end, what you’ll see is that the white space will go underneath or at the top. So grid items are aligned with anything else than stretch, their size is just what is needed for the text or in this case, what is needed for the, for five, for boxing or for wizards. You’ll notice that their width is still taking up all of the space, but their height is not. Now, and the same happens when we set a margin bottom to auto, it’s also going to use up all that available space. Or if you wanna think about it in logical sizing, if we set margin-block-end, so at the end of the block, we want to have auto-margin. It’s going to do the same.

30:35 - It’s going to take up that empty space as a margin, the paragraph is going to give that space back to the cell. So it’s not going to be used by the item. And the same happens when you put into the end, so we do a line self end or we do margin top or margin block start, and then that space will also be given back to the cell. And it will be put before the actual text. And with that, the item will be just as much as needed for the text. And other cells will still be larger, right? So the cell is all of this phase and the item can be all of the space when stretch is used, or it can be less of the space when there’s a margin used or some form of alignment.

31:19 - So how big do grid items get? Well, they can become the size of the track, which is a default, that happens when an item is aligned stretch or when the overall grid uses an alignment stretch for these items. The item can also be as big as it needs to be for the content. And that is what happens when the item is aligned in a way that leaves for white space, and when it’s at the start or at the end, and there is some space available, then it’s going to be as big as the content needs to be, or when you use an auto margin, that also give some white space back to the cell. So two takeaways that I hope you can get from it, Grid Layout really helps with more international CSS by being less physical. So you are able to write the same CSS for different types of languages and different types of writing modes.

32:14 - And I think that is really cool, and it’s something that designers for print never have. They would have to rethink all of their work. For websites, nothing the browser decide flexibly can really make your life a lot easier. So rather than defining all of the different sizes, sometimes it might be better to use flexible units like flexible grid columns so that when a content editor happens to add a really long word, the word is still readable and it’s automatically dealt with, or maybe you want to choose not to do that and override the default settings. So this was my presentation. I have some links here. The links are also on talks.hiddedevries.nl which has the slides as well as the resources, feel free to ask me any questions at any time on @HDV on Twitter.

33:09 - And with that, I want to thank you very much. And hopefully, I thought there might still be some time for our Q and A. .