 Hi, this is Hideo and I'm stoked to be at Singapore's talk.css. An event that I've seen on the Twitter spot 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'd love to be back at some time, but sadly this thing is going to be virtual. But that's fine. We're going to 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 Grid layout. 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. Hi, I'm Hideo. As I said, I am a freelance front-end developer and accessibility specialist from Rotterdam in the Netherlands. This is a photo of Rotterdam in much nicer weather than it is today, it's rainy out. If you are in the Netherlands, please do visit. I also have a blog, which is on Hideo.blog, a new URL that I registered recently. And I'm on Twitter as well as at HDV. Now, when we talk about designing things, we usually also have to talk a bit about the campus we design on. And people who do print design, like Quim Kral, designed these beautiful posters, a print designer. He was assigned to do posters for things like museums. And he was asked, do you want to do this poster? I 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. 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 that beautiful design. 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. A supermarket near me, and I guess supermarkets around the world do this, 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 that are on special and they'll put them on these posters. And I think the general design of the posters, maybe the grid of the poster, will very much stay 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. 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 some 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. 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 in the tube. Or we can be somewhere at an office and use some fixed desktop computer. Or we can sit on our couch. We can use it pretty much everywhere. And the web is everywhere. And we have infinite campuses. Unlike the print designers who had these fixed campuses, which almost sounds a bit boring. We got to design for all of these different campuses. 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. So the web is a very exciting platform to be working for. Luckily 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 I want to talk about the distinction between block sizes and inline sizes. And that has to do with directions that they go into. 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 blocks 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 layout. 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 at all these different writing systems. 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 specification explains there are more writing systems out there. There is the Mongolian based writing system that has the blocks flow from left to right and inline going from top to bottom. Then there are hand 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 are graphic systems where the inline direction is from right to left and the block direction is from top to bottom. And there is all these different writing systems. And it would be really cool if the web automatically adapted for that. And then there is CSS invented for that. And the great primer on that is Wei Jing's post, a vertical typesetting with writing mode revisited. Where she looks at an older example that she created. And then opens it again. She goes from frowny face to scare face to angry face to disappointed face. In just 5 minutes. In this post she explains some stuff that she encounters when she 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. I quote, unfortunately 10 minutes into the attempt I broke my brain. So this means something. If Wei Jing breaks her brain, I'm sure many others will as well. So at this point, not all of writing modes will work as easily as you might expect. Especially if you're trying to use pictures and things that are not text. But that's fine. Because trying to work with writing modes and understanding writing modes is still very useful. If you want to understand CSS grid and flexbox, as Jen Simmons explains in her post, CSS writing modes are on 24 ways. If you understand that these writing modes have different directions, and that we have this block direction and inline direction, and it can vary between different writing modes, all of a sudden it makes a lot more sense that we have things like align self start, or align self end rather than left or right or top or bottom. 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 property, and then you can use the values horizontal TV, which is top to bottom, vertical RL, vertical right to left, vertical left to right. And then there's two properties for sideways that are kind of meant for interesting, creative, typographic effect, not so much for, say, the languages. So let's look at sizing now. And for that I want to look at three different sizes. 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 let's start with the grid container. You can create a grid container by setting display grid on any element, any octave or section. Then if you put that onto a page, this is a section element, which is a block element. It's going to take all of the size of the window. It's a 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 going to take that same size. It's going to take it from its containing element. If we set a width to the section, then the div inside of 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 element. 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. What's going on here is that when you use either floats or position absolute, is that this element is only going to take the space that it needs for the content that is inside of it. Because there's no content in now, it's going to have no size at all. If we put something in there like hello world, it's going to take exactly the size that is needed for those two words, for the words hello world. So the grid container is going to take the size of its containing element when the grid does not have an explicit width. It's going to take the size that the content needs when you use float or position absolute, or when you use an inline grid. And it's going to 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 to 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 of the content needs, and that's whenever no of the exceptions apply. So usually it will be the size of 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. We'll mostly be talking about columns here. So if you want to create columns in a grid, you can use the grid template columns property. Then each of the values are separated with a space. Each of them is one column. So in this case I've created three columns, a 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 the 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, 5, 10 and 5 centimeters. We could use pixels, or we could use a mixture of things like m's and rms and ch units. It doesn't really matter. With fixed sizing you are going to 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, relative sizing and absolute sizing. So relative sizing is relative to something. It can be relative to the font, like m and rms, ex and ch as well. Or it could be relative to the viewport, like the viewport width unit and the viewport height unit, v, w and vh. And then there is v min and v max, which refer to whichever part of the viewport that is the biggest or the smallest. So v min will be a percentage of that part of the viewport that is the smallest, and v max 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 could also use absolute sizing in centimeters, millimeters, the q unit, which I'll explain in a minute, inches, pcs, 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 a centimeter is actually 96 pixels divided by 2.54. And we'll get into why in a minute. Minimeters are a tenth of that and the q is a fourth of that. Then inches, an inch is 2.54 centimeters and it equals to 96 pixels, an average of 4 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 there are good historical reasons for that. They had to pick something, I guess. So that's what they ended up with. Now in sizing primitives, that's what I explained in her amazing talk called Defining Auto. Thick sizes are sizes that are independent of layout or content. So all of these that I've laid out here, they're all independent of content or layout. They're based on fonts, viewports, or absolute things for each other. Now if we define 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 going to perfectly fit there. And as you can see, the tracks are smaller than the grid itself. So the grid itself goes all the way to the end of the edge of the viewport. But the columns are just going to 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 it goes on top, unless you play with Zed next. And that will happen. So the text will kind of go and flow into each other. And that's what will happen if you set a 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 going to 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 that 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 overflow scroll and make at least sure that people can access the text there. So that's what happens with fixed track sizes. Let's look at some other ways you can 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 50M, the last one is 10M, and then the middle one is 1FR, which means one fraction of the remaining space. 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 ended the mid-height in my CSS but this is what it will kind of look like. Until I add some word in there like the word blackbar which is apparently in Dutch. What you'll see is that it will actually take up much more space than the others. 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 all 1FR. But what is happening here is that grid is helping you make all your text 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 text. So if there would be those zeroes that we had before then the texting of what would go right on top or the word blackbar in this case would go on top of the other text and you usually don't want that. So if you use FR units it is going to prioritize displaying text to honouring your track sizes. So this is what it says in the spec about that. 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 thick text sizing. So it's going to look at all the other sizes first. So it's going to put the word blackbar 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 of such rows and columns is subtracted from the available space yielding the leftover space. And the leftover space is then defined among these rows and columns that have an FR unit in proportion to how big their FR unit is. So if you have one FR it's going to get half as much as something that has two FR. So the proportions are also respected there. So FR units will take the leftover space but only after all of the other sizing functions have ran. Now we've got the word blackbar there and we've seen that it's going to make our middle column much bigger than we actually expected 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 one for the word blackbar. 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 marked 1, 2, 3 here they go down vertically in one straight line. So basically that pink cell has to be as big as the word blackbar because otherwise that grid line would not go in a straight line so it would no longer be a grid, so to say. It makes sense but it is a bit confusing sometimes to people. So basically this one word, one cell in a track can affect the whole track size. It makes sense if you remember that all of these cells are part of the same grid 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 minmax function with as the max an fr unit and as the min a 0. Basically something like this so you would have your grid template columns with 50 and 1fr and then 10am then the middle one is 1fr but if you don't want that one to grow based on the contents what you could do is use a minmax function that has 0 as its minimum. By default the minimum for a column with fr will be auto. That is why that word blackbar actually was able to make our grid much bigger and if we use 0 there that kind of behavior will not happen but you'll have the overflow problem that we saw before so it depends on what you want really 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 they're going to be as small as they can possibly be 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 minimum temperature and it's going to take that size up because the min content size will be then equal to that the size of that word minimum temperature which means minimum temperatures it's one word in Dutch and it is very long, 19 letters so it is going to take up that size and make the whole thing bigger so if you use min 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 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 fifth 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 fifth content 50 pixels so I say yes become as big as the content needs but don't become bigger than 50 pixels so that is something you can do with fifth content and then we get to auto track sizes now if you have a grid and you can define columns so you can give one of your columns 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 size but if you don't set 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 and if you don't define any sizes you are going to get the auto track size 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 penny, spaghetti and farfali into these cells then clearly spaghetti is the longest word it's also the longest pasta by the way so it is going to take the track size up to the size that that word needs so it's going to be as big as spaghetti now if we put some other word there like cannoloni it is going to take the size of that track up to be as big as the word cannoloni so that is the maximum content size if you're using auto it will not get bigger than that it will be as big as the largest max content 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 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 going to be the minimum size for an auto track so it is going to make sure that all of your words fit in so if you have lots of words and one really long word it's going to be that size of the long word it's going to be at least as big as that biggest word 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 going to be the size that you specified when you've used thick sizing units relative ones or absolute ones so that's the most straightforward if you've used the thick sizing unit then your track is just going to be that size when it's going to 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 it is 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 web page 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 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 the alignment is what happens more space than content and it's basically what happens on this slide so I have this sentence here and then underneath I have a bit of space left so what I could do is some alignment like I could put it at the bottom and then the remaining space will go to the top or I could put it in the middle and the remaining space will go both at the top and at the bottom so alignment is basically what will happen if you have 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 is nothing to redistribute so there is nowhere for white space to go so we would not be able to align this at least not vertically because there is no space at the top or the bottom so we cannot move this to the top or to the bottom even if we tried and if a browser would honour those properties for this text there would be no difference visually of course in this case there is some inline alignment possible like I could put it in the center or do the right 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 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 there is only one word in each of these cells we don't know if the item is actually as big as the cell or as big as the word if we set a background to these paragraphs then we will be able to see how big they become it looks like this with the blue background we can see that these items are all as big as the cell that they are in and the reason for that is that the default alignment is stretch so all of the white space is being used 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 up all of the space that is available now if we use something else in stretch for instance if we align to the start or we align 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 in 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 wizard you'll notice that their width is still taking up all of the space but their height is not now 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 want to 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 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 the same happens when you put it to the end so we do align self end or we do margin self or margin block start 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 now the cells will still be larger so the cell is all of the space 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 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 so when it's at the start or at the end and there is some space available it's going to be as big as the content needs it to be or when you use an auto margin and that also gives some white space back to the cell so to take away that I hope you can get from it, Gridlayout 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 and I think that is really cool and something designers for print never had they would have to rethink all of their work for websites letting 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 is 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.info free something now, it has the slides as well as the resources feel free to ask me any questions at any time on hc3 on twitter and with that I want to thank you very much and hopefully after this there might still be some time for Q&A Thank you, thank you Hida for that amazing talk and are you still sharing your screen cause if not we can just do the um how do I do a part view for the there we go anyway whatever there is a different screen there and there yeah um that was a really great talk because I think that sizing especially when we do flexbox and grid is slightly different from what I used to and I think there was a very clear explanation on the examples are great so I guess nobody is going to ask questions so maybe I will ask questions and so have you have you used any of the techniques that you talked about like in production yes hello I work on some sites that have some great layouts in them I think it's a lot harder in reality to convince designers of doing something that's not fixed so super often I will do it in centimeters because whenever you really wanted this to happen sometimes I've been able to convince do things like m's and stuff that are a little bit more flexible but it's pretty hard to rely on values like max content I think when like if you have multiple pages it's yeah the same grid and then there's differences between the grid designers go crazy so yeah in reality I don't know I don't think I've used all of the techniques that are here I hope to inspire people to use more of them and I think we can use them in less traditional cases like maybe not on your average corporate website but maybe on if you're doing a poster for a supermarket that's going to display on screen it might make a lot more sense or like an application interface or something like that where you want to embrace that flexibility and use different words yeah yeah I think you presented a very realistic view cool well my second speaker Murray I have a question I have a question amazingly so what do I want to know thank you for the talk I really enjoyed it what I want to know is actually what were we looking at there was that a recording you've done that through youtube what did you do you have to review your secret now yeah I can type very fast and I can think why not type I can teach you all of this for a small fee but it's been a pre-recorded video so I had a caption beforehand because everyone was very applauded by the captions the captions were great actually I mean it makes a lot of sense because sometimes you miss words or whatever I mean especially in a context like Singapore not everybody is a native English speaker so it can actually be really good to have the captions so good move I don't have captions