 Wait, I want to confirm something first. Can you see my cursor moving? Okay, so hi guys. I'm Olivia. I do a lot of CSS grids for fun, not for profit. So I thought today's talk will be building a CSS grid layout. So what we're really going to do is I'm going to take a magazine layout and then sort of show you how usually the layout can be built using CSS grid. I got this idea from a smashing conference. Jen Simmons did this live. Jen Simmons is a developer advocate for Mozilla and she does a lot of CSS grid stuff. And during that conference, Chris Coyle, the CSS God, pretty much gave her a flash drive and then say, I don't think she has seen the layout before. Gave it to her and then say, okay, you're coding this live on stage. So this is where the idea came from, but we're not doing it live because we're not crazy. We're just going to pretend that it's live. But yeah, so let's get started. But before I jump into the magazine layout, this is the very basics of CSS grid. And it's actually very good that we follow after we check. So this is an ethical thing, layout, I guess. This is the HTML. It's HTML. It's just part. Each of them is a div. Port is the parent div and then all the others are the child divs. And if you follow Vishak's presentation closely, this is how you would do it in Blacks. You display facts. I purposely put like an absolute unit because I just want to and then flex and hide it. To do this in CSS grid is actually only three lines. All you need the very, very basics of CSS grid is just these three lines, declare this display grid, grid template roles, which is repeat 380px, which means like just repeat 80px three times. And then grid template columns, repeat 380px. And what it's going to do is that as long as you have the grid laid out, so this is the grid layout layout, all the child divs will just sort of float into its position. You don't have to do anything anymore. And even better, it's actually a short hand. So it's actually just two lines for this. So in a way, CSS grid layout is actually very powerful in the sense that it just makes it easier. And that's really it. So let's start with the magazine layout. So this is the magazine layout that I've chosen. And I'm just going to show you how to build the grid template right now. So this is how a designer will see, right? I guess a front-end designer, front-end developer. But when given a layout, how are you going to build it first? You're supposed to build the track because you're supposed to lay out your track. So this is the one thing because you see the lines here. So this is the line and then this thing for the text. And then this is the columns and then also for the rows because it starts here. So I'm just going to put one line here. And then this line is where you see the image at the back. It's not very clear because of the opacity. But this line is because of the image at the back. Now I can create another line here because this one starts here, but I chose not to because I don't know. I guess it's my choice, right? I decided to just margin top this text so I don't have to create another line. But you can if you want to because your the coder is up to you. This line here is for this weird caption, which you probably cannot see, but there's a caption here and then this line is at the end. So this is what we call the grid track. It's better if you draw lines as well. And then now we're going to define the units for each track. How big is it basically? And any unit is possible. You can use percentage, you can use rams, ms, pixels and so on. So for example, this at the beginning here, I'll put 20px. And then I put 40px because why not? It takes about 40% of the page, more like 35 actually. And then I decide to use 1fr, 1fr, 1fr for this. 1fr is a new unit introduced for with grid. It's pretty much a fraction of the free space. So what this does is that at the end I put 20px. So 1fr, what it does is that the browser takes 100% of the width, minus 40%, minus 20px, minus 20px. The remaining, they divide three times because it's 1fr. If I put 2fr here, it will divide by four times where this width will take 2fr, two fraction of the free space, 1fr, 1fr. And this is very important because if you use percentage, you certainly have a padding here. There's a thing called grid gap. If you have a padding here, the percentage sort of messes it up and then you have more than 100% space. It's not like a free thing. But with free space, basically the browser does the calculation for you. So this is something new that you should really take advantage of if you use CSS Grid in general. And then the row is 2rem because why not another 2rem? 60% because it takes about 60% of the space. And then down here, it could be 10%. It could be 10rems if you want. I put 1fr for fun. So with this, you see, this is what the parent, this is what you should put for the parent. Grid template rows, like 20px. Ah, this is a typo. It's supposed to be 40px. And then the 1fr, 1fr, 1fr, I can truncate down to repeat 3, 1fr, and then 20px at the end. Repeat 10px to our 2rem, 2rem, 60% 1fr. And this is basically all you need for the parent div. Ooh, sorry. But now we have to go for the child div. So what will happen if you just put the parent div without doing anything to the child divs? The child div, like if this is the first element in your HTML, it will naturally go into this little thing here. If this is the second one, it will go into this box. And if this is the third one, it will go into that box. So what you need to do is that you need to assign properties to the child divs to tell it where it goes. And it's very easy. But the first thing you need to do is you need to number your tracks. So like, see for example, this is the first one. The very edge will be number one. So number two, go up to number seven. And then you do the same thing for your rows, which is top one will be number one, and then at the end there will be five. And then this is where the easy thing starts. So this intro is by choice. I put all this whole thing as one intro because I want to put the background white, the whole thing white. So this whole one intro, how do I place it here? It's super easy. Great column. If I want it to start on the second track and on the third track, I just put two slash three. And then the same thing goes for grid row. If I want to start from three and end at five, three and at five, just put three slash five. There are a lot of various ways. For example, this one caption is actually over here. So four column four, grid four. And if it doesn't span longer than this, right? If it's just one, you don't have to do this slash four slash five. You don't have to do grid rows four slash five. So grid column four, grid row four. And then even more choices. This text here, grid column four, okay. And then it was only one column. Grid row two. And if I don't want to put two slash four, I can just put two span two. That means it spans two rows. The same thing, you can use the same thing for grid column as well if it spans two columns. That's if you lazy like me, usually. I've done CSS grids for a long time now. I don't really number all these anymore. So I can sort of like guess where things will be. So I'll just put like, oh, I know this thing is going to span two columns and where it's going to start. Don't want to count when it's going to end, even though it's a simple math two plus two. I just put span two. And then text two is even more options. You see this is negative three. It's basically count from the end. Grid column. So this will be negative one. This will be negative two. This will be negative three. But I can put grid column negative three to negative two. This is also our laziness because sometimes, because I don't, like I said, I don't number my columns anymore. So sometimes I just say, oh, I know it's just going to be the last column or the second last. So it's just going to be negative three to negative two or negative two to negative one. A very good hack as well. If you want something to span the whole thing, you can put grid column one slash negative one. So it will always take the full width. And particular is very useful. Just sometimes you change your parent tracks. If let's just say if I put one seven here and then realize I actually got one more column that I missed. If I change my parent track, then I need to change one dash eight here. But if I put one dash negative one, that will always change. And I don't have to worry about that. So and then grid row two, spend three columns. And this is the last one image at the back. It starts with in grid row two. If you can see and at grid row five and then column. If it's at the, it's right place. You don't even need to identify where to start because it was, this one is going to start at the first column. So I just tell it to spend five and spend five. It will actually take up until this space. I decide to like just image 90% so that, you know, I don't have to create another column here instead. It's all just by choice. If you want to, you can go ahead and do it. It's just something that to minimize my code, I suppose. And of all these, you, because they're all overlapping and depending on the placement, your image might actually overlap everything. You can see index negative one, where it just goes to the back. So any child leaves that overlap. And if you want to arrange the order Z index works. And that's pretty much basically it how to build the layout. It's actually as simple as that. And one thing about this is that if you are having trouble as well building, use the grid inspector in Chrome and Firefox. Firefox is better. By Chrome, what Chrome's one is not, not bad too. I suppose they will actually tell you the thing, the good thing about Firefox grid inspector is that they actually tell you all these numbers so that you can figure it out yourself. One thing Chrome is that they still show you how the grid is so that you can, you know, see how to build it. I'm going to give you an example. Pretty much this layout on cook and hold on. Is it clear? Clear, right? Change the view. So I think this is the main positive feel about CSS grid where this is my HTML. And I don't want the HTML to run here and there. Because it's not even, if you remember the layout, the caption was in a very weird place. So the caption I might have to put at the bottom if I were to use flex for example. But I want it to be more semantic because that's what an article is, right? If you look through a screen, what screen reader, reader mode, this is what it is. The title, the blurb, the image, caption, and then the text. And if you applied what the properties that I showed just now in just that two slides, this is what it's going to be. Magic, I suppose. And then there's an even better thing. So this is using pixels. And then it's slightly responsive. So you see this thing, remember, it was 1FR, 1FR, 1FR. This first column, second column, and the last column was pretty fixed in a way that is 40%. This will never change. This one was 20 pixels. This one was 20 pixels. So as you go closer, most of them don't change much. And then this 1FR, like the free space, is distributed between these three columns. And then at some point, you see this overlap thing. There's actually this amazing thing instead of 1FR, especially for text, well, only for text especially. You can use this element called, this unit called CH. It actually means characters. What you do is that you determine the number of characters here. So I think this one, I put min max, bracket, 25 CH. That means that I don't want the div to shrink anymore if it reaches 25 characters. Maximum 45 characters. That means that if you reach 45, don't open anymore. This one was 0.1FR. This one was 1FR, I think, and this one was 0.1FR. So what's going on here is that I'm going to show you a bit. So this is normal, right? This one is 45 CH. And then as it goes closer, the 45 CH remains because it is what it is. And then only the FR ones, which is this first one, this middle one here, and this last one here, will shrink because FR is just free space. And what it's telling you that is the free space is getting smaller, so it's slowly closing in. And then after that, you realize that it's no more free space than only they start to shrink the one on the right. But obviously, at this point, you do another break one and then do another grid or maybe just block it. So that's the value of this new thing as well, CH, that you can use especially just for text. And then let me go back to this. A few tips to do your CSS grid. Use color backgrounds to build a grid template. It's just much easier to see. You can use the grid inspector as well, but sometimes when you open up the inspector element, then it's very little space to see your main browser. So this is, I think, one of the easier ways that I've found to build a grid. So as you can see, this is actually the grid. Things that you should know with grid, you can use the same flexbox properties for CSS grid. So whatever that you saw in Richard's video, align items, justify content, align self, justify self. There's so many try what to get whatever you want. Everything works exactly the same as CSS grid for CSS grid properties. You should know number two, the centering items in the grid is now two lines. It's an upgrade from using display flex, which was three lines. But this one place item center is just a truncated version for align items center and justify content center. Justify content center and probably align content center. Yeah, it becomes place item center. So now it's just two lines. If that's what you fancy, although to be fair, using flex is not a problem here. I showed the easiest version where you use numbers because I think that's what you should use if you're getting started with CSS grid. But as you learn more about the fundamentals of CSS grid and you want to use it in real world production, I think this is where this comes in. It's a very good value. You can name your tracks. So instead of grid, this is a child leaf. Instead of grid row three dash five or grid row span five, you name it grid area header because that's what it is. So this was like you'd be like header, grid area header. And then when you use it, you still need to define grid template rows and grid template columns, but there's this thing called grid template areas where you say you name header, header, header, you use the grid areas name instead of just numbers. And it's very useful because it literally gives you a visual representation of what your layout is. And then your next developer comment is then also confused why you use grid. And then like a lot of my projects are used numbers because my projects are super small. Can you imagine a website where there's a lot of huge layouts? This is where it becomes very handy. So what it says is that because I this assuming this thing will have three columns. So one, two, three, it has five rows. So when you say header, header, header, you're just telling the browser to say this header will take up the whole space, take up three columns on the first row, then main, main sidebar, main, main sidebar, main, main dot if you don't want the sidebar to expand. So the sidebar will actually stop here in this grid track and then the main will go on. Why like that? I don't know. Maybe your designer feel like that's the way he or she wants to do it. That's it. And then footer, footer, footer. Again, very useful just to show you how the website should look in general. And then you know, you can just build it like this. So Flexbox or Grid. This was a question that came out, especially two years ago was very prevalent when CISGrid became more popular and then a lot of devs were like, why do we need Grid Flexbox which was enough because Flexbox was such a step up compared to what we were previously using which was floats and Flex was amazing. And then there was this argument like Flexbox versus Grid and the correct answer is not one or the other, but it's actually both. They have their own value in each, whether which one that you want to choose. I guess the question is, yeah, I use both in a project, but when to use which. Vishak's video actually touched a little bit. Use the Flexbox where you don't know how big or how small a certain thing is like the child is. So you just want it to be flexible because that's what means, right? Flexbox. When you need to arrange multiple items in a single row or column as well, it's very recommended to use Flex because single row, not confusing, you know, Flexbox, Flexbox, Flexbox. Use Grid when you need to arrange items in multiple columns or rows or for layouts, unless it's really simple like 2-1 where you can just Flexbox, Flex2 and Flex1, but it is a very complicated layout like the magazine layout that I just showed. Definitely, definitely use Grid. And this is actually a real-world example that I made into simple boxes that I did for a client. What is going on was that in the mobile version, the design was that this was ABC, a normal order, it would be a display block. But if you do it on desktop, certainly the order changes. A and C is certainly on this left side bar and B is here. And this was three years ago, I think, and I didn't know... Well, I didn't know the solution, the proper solution. If I were to use Flex, I had to contain these two in one div and then this in its div on its own. But then it doesn't work because this is not... the order is different. And then if I use Flex on the other way, if I put this thing first, item C will be down here instead. And then I need to use JavaScript to calculate the height and then merge in top negative 150 pixels or something. So this was actually my first real-world application of how Grid pretty much solved my problem. This was Display, no need to Grid, but no need to use anything, just display block. But then when I... on desktop, I apply Display Grid and then I just place the items where I want to place. Yeah, and that's just pretty much it. But oh yeah, and then there's a question. So my general rule is if layouts use Grid for sure, because anything not layout if I use Grid, I feel it's very overkill. But what if this scenario, right? What if this designer came to me and this was a card instead, like a media card, you know, like for example, if she wants to put a text here, this is the image, this is the CTA button. And then suddenly in desktop, don't know why if she feels like it, this is the text, this is the image, this is the CTA button. Then I'll still have the same problem. And I say that would I use flex or Grid in this situation, even though it's a media card, it's like a smaller component in a very big project. I think I would actually use Grid just to make my life easier. And if I think like that, there really isn't a set rule on when to use Grid and when to use flex, it's just more of like whatever you think solves the problem. You know, according to what you know, Grid or how you know flex pretty much. And this is actually one of the projects that I did. All of these have the same HTML. They're all just altered using CSS Grid. And I think this is what's amazing about Grid, I guess. You know, you can do something if any HTML, you know, if you want me to place here, you want any of your CTA to fly up here, can no problem. It probably can be done if you don't use CSS Grid, probably a lot of position absolute hackings or like display flex hackings. But CSS Grid just makes things easier. And I think that's why you guys should get started. And that's it, I guess. Thanks for your time. And if you can follow me, but don't have follow, don't want to follow, so can. I will also CSS enthusiast. There's probably one code plan going out tonight. So if you like coupons, you can visit my.