 I thought I don't need to explain subgrid, but looks like I need to explain a little bit. Okay, so one of the things, can you see the screen or is it, can see, can see, can, stop flickering, stop, stop flickering, okay. So what happens is, subgrid is one of the things that I want support for when CSS Grid landed, but unfortunately it didn't, we didn't get the support. So what subgrid is, for example, just look at this image, it makes things very, very clear. Usually when we create a design, right, we take like 10, 12 columns and smack it right at the design. And then we try to fill elements into each of these smaller grids, like for example, this thing called AG2 takes up the middle six columns, the AG1 takes up two columns, for example. What subgrid does is, it allows you to contain grids within a grid, so like nested grids. So AG4 and AG5 are within AG2, right, but in the current version of CSS Grid, you have to define a new grid for AG2 in order to use your current grid. So in AG2, what you need to do is grid template column, six columns, and then grid column gap, whatever that was before, so you have to write a lot of template code just to create that nested grid functionality. So what I thought was, hey, since you can write that template code over and over and over again, why not create a SAS mix-in to automate the hell out of it, so you don't have to do it, right? Here is the mix-in that I came up with. Okay, let me do this. This is the mix-in that I came up with. You can see? You can see? Can I? I'm not going to explain the mix-in much, but let's figure out how to use it. So when I started playing with layouts, right, one of the exercises that I liked doing is to try building this 10-column complex nested AG grid testing. So this is what I started out with. If you can build something like this very quickly with your CSS grid, you probably don't have to worry about layouts anymore, so you can ditch bootstrap and forget the hell out of it. So we are going to build this thing together right now and see how the sub-grid thing works. So I actually have some code over here, I'm going to comment it out. In case I forget, I'm not going to delete it away. So what happens? What happens? Okay, let me comment this out as well. Okay. So this is what happens when you have CSS grid, when you lay out a component, right? All the things stack in one column. For the grid to work, so let's go back to this thing. For this grid to work, you want to put your HTML elements in such a way where it sort of makes sense for the grid. So if you segment this out, AG1 will be one thing on its own. AG2 and everything in there will be a separate div. AG3 will be a separate div. So this is how the HTML looks like. Okay, AG1, then AG2 is like one whole big chunk of thing, then AG3. Okay, so this is how it works. So what we want to do is to first style AG1, 2, and 3, right? But before that, I need to style the container to create the grid. So container, display, grid, which is basically the thing you need to do. Grid template columns, since we have 10 rows of equal stuff, we can do a repeat, 10, 1FR. So we're just going to do that. And once you do that, you can go under... What's that thing? Okay. You can go and find your container. There's this grid thing, which tells you very, very nicely that you're using grid. Then if you click on the waffle here, you will see your grid. So you can count. There's going to be 10 columns. Then to create some gaps in between, you can use this thing called grid gap. Sherlyn was talking about it. And then I think there's a video for this. Can you link it? Can you link the video somehow later? So I asked for a thing to link the video. So basically you can do a grid gap and then you can create gaps between your stuff. So that's how you create a grid. Now, next, we want to position AG1, 2, and 3, right? So AG1 is two columns. We can say grid column span 2. That means two columns. So grid 1 becomes two columns and everything stacks forward. AG2 is... Okay, let's count. 1, 2, 3, 4, 5, 6. Six columns. So span 6. And then we got six columns there. So AG3 is also two columns. So I'm just going to do this. Oh, 3. Okay, so we have that initial thing right at the start. Now, this is why it gets a little bit interesting, because if you want to do AG4 and 5, we kind of need to set AG2 in a way. We kind of need to redefine the grid for AG2. So what we have to do is display grid, grid template columns, repeat, 6, 1FR, grid, gap, 1EM. See how I'm repeating this thing? Sort of like repeating this thing over here. So this is what we have to do to set the AG2 to this grid container. Once we do this, we can do like AG4, which is going to be three columns. So we have grid, column, span 3. Then here, three columns, right? AG5 is also going to be three columns. So span 3 together. So this is what you need to do to have that fake nested grid. But what I did with this is you can remove all of this and say include, include Fox, grid, 6, 10. It's the same thing. So whatever that I just did, it basically does the same with this mix-in. So one line instead of four lines. That's basically what the mix-in does. Moving on, moving on. So what we want to do is, OK, AG6 is two columns. And then AG7 is four columns. And then we want to say, OK, AG7 now is four columns, but there are some stuff inside that we want to do a nested grid for. So we use include subgrid again and say four. So basically it kind of feels the same. Except you see the inner things became grid items already. Grid items automatically take out one column. So you see AG89 and 10 as one columns. Then AG8 and AG9 are two columns, right? So great. I think you must be so bored with me over here. Span 2. And one final trick for spanning the entire thing is to set AG10 grid column start 1 slash n minus 1. So that's like span the full column. It's not doing. OK, OK, colon, colon. OK, bam. So this is how you can use this thing. Now what if you don't have this AG6 over here and you kind of need to move AG7 a little bit to the right? What happens, right? So you can say grid column, I think it was start. I cannot remember, but I think it start. You can say two. So this will be start the second column, which is what it's doing now. You can say three and then it poops a little bit to the right. So it doesn't column, column. Yes. OK, so that's the full subgrid mixing that I created to help you with nested grid. That's it. OK, OK. This is open source link, link, link. OK, easy, easy, easy. Google Zelle for subgrid, of course. And then you get the entire freaking blog post explaining what I just said. OK, can. I'll start with your link in the meetup page and Facebook and other social media features. OK, fine, I'll Twitter. OK, so the last person is another person that can ask a strong answer. Question for Zelle first. I love question number one. Can you bring your grid and try and solve the problem? No. When I first laid out the grid, I didn't say display grid. So it's display block, which is why everything got stacked like that. But once I do display grid, it stacks like that. Question. How easy is it to override the full subgrid if you should need to? Say at a certain grid point, your grid changes and you don't know how long you need it to be in a full subgrid. Well, put in a grid point. You know, like if you use CSS, media, whatever. This is SAS syntax. OK, if you use CSS, OK. If you use CSS, media, mean, width, and say 600 pixels. You can do this thing over here. Yeah, my question is if... Because I use mobile first. So smaller widths and then expand and override. If I've already got the full subgrids applied, how do I get rid of it? Well, if you do that, maybe one of the ways is to restrict your media queries such that it becomes like if it's... It's no easy way to override. There is. If you don't need it, you can just say display block. Otherwise, just override your grid point. And that's it. No, I will try and rule out the hard disk overriding. I'll just toss in the links. Yeah, just toss in the links. I don't have that use case. That's that easy. Yeah, I don't have that use case myself. So now... When I get to it, I'll think about it. If you don't think any questions can go and bombard them. They are semi-fun employed people. So yeah, go ahead and bombard them. Hopefully fun employed people, please. Anyway, the last speaker of the night is...