tailwind. So actually if you, you know you understand the grid system and you are coming from the bootstrap background. So the basic understanding of the grid system is much easier for you. Otherwise you're gonna cover everything about the boots about the grid system actually. So uh the grid system is all about creating the layout layout of the web page. So there are two ways to create the layout. One is the grid system, Oh sorry go back. one is the grid system. The 2nd 1 is the flex. So the flex, you know, what's that mean of the flex? It means flexibility. So we're not talking we're not talking about the flexibility right now. We're talking about the grid system which is which starts from here. So we will be talking about them by now. So um in simple meaning if you want to create a simple, you know, grid, the grid would have the rods would have the columns. It would be able to create a layout for you. So how you can create uh the layout for a website, you need to go inside and I mean inside the container um um trying to be inside the container anymore. Anyway. So Div okay. The class class name and then first of all, because we were going to make the grid. So I just put the grid here and right now I'm just cutting this and tasting this inside the grid. Okay I'm saving this and now I'm making it, you know, 200 and I'm I'm changing it, I'm just leaving it as it is for now or just make it text wide. Save it go to the browser and here it is. The texture is right now. Anyway. The grid is the only grid is not applying anything but you need to define how much columns you need. So in this grid there is a great view. How much columns do you need? You can have 12 column in total. So I want you know I write grid and I write only one columns with this wouldn't make any change. I'm just saving it going back to the browser. You can see that these are the you know the extensions we just installed in the previous cast. Now we can have the extension. The one doesn't do any change. I'm going to go back and I'm just deleting the one and I am trying to make it something different one bread. Okay. And then I'm right Ingrid. Okay so oh sorry I shouldn't have right grid one. I should have I should have wrote um grid call. How much columns I want? I want grid call one. Well it still won't make any change but this is the right thing. The grid call one not the grid one. That was not right say next anyway so we can have total total 12 columns. So if I write you know grid to the column would be divided. The column should be you know smaller but it is really not. And wait a minute. Grid oh mean grid calls one or grid calls to? Not grid call one. Anyway. Now it is, it's it's still the same because it is one I need to write grid calls to. So now you can see that this saved us, the intelligence saved us. So I'm one grid calls to and if I go there, you can see that it is half now. So what is this, what is the meaning of that? Actually I said I said that I want in this grid, this is a grid because I define this as a grid. So this is a grid. Uh this is a great actually, if I put the line break, a line break just to show you, but when I save it, it's going to change it anyway, so this one is a grid and in this grid I want two columns. So ultimately both of the columns would would be divided into two. So this is the only one column. I'm gonna copy that and I'm gonna copy and paste it. Okay, and I'm gonna change the color from this to anything. I'm gonna rewrite it. Uh Not a good thing. So B G B G. And uh it is late. No, not legislate. Absolutely, but some more cool color. Let us go with the B. G. M. But no biggie Ember has already applied. So let's just go with this color. Okay, I'm saving it. I'm going back to the browser, you can see that we've got two columns. Okay, so ultimately this one. This column is 50% and this column is 50% because we said in this whole grid we want only two columns. But let's say if I write I want three columns, let's just say I want three columns, can I save it? And I go back to the browser now. Actually it is, it is third one, it is third one, it is there is an empty place. However, we don't have anything for for the third one, but it's still because we want each column to be third one, we want three column to be fit in this grid, we don't have one column. But it works. I mean if I can, I can, you know, I can copy this and I can paste this right here and I can make it slate for now just to you know, okay, I just made it slate and you can see that. Okay, three columns. But if I say like seven columns, I'm gonna have these small columns because 1234567. So there are no columns but the size of the column is absolutely became seventh by one. You know, it is the size of the column is now updated. So you can have total 12 columns. If I write 12, am I'm gonna have you know now there is enough space to fit 12 columns, but only three ones right now. So I think you got it anyway, if I just make it, you know to and I save it then one column to column in the third column is not there in the same grid actually, it is still in the same grid, this is the this is the point, I mean if you're coming from the bootstrap, you mean you should be thinking that the raw has been changed, but here the raw is not changing because it's the grid, it's not the raw. Okay, I mean, you know hypothetically there is a difference between the grid and the wrong. So anyway, um this grid has three columns and in a single in a single grid, you know, we need two columns and the third column is now actually, you know, hypothetically inside this grid, but it's starting a new round anyway, I think this concept, I think clarifies a lot of things, but there are more things about the grids, for example, maybe you want, you know, you want this column to be smaller, this column to be bigger, this column to be medium or something like that. So for that we have also, we, we have some ways we can apply and we are we are absolutely gonna apply them, but not now, later, we will be talking about the gaps and I can, I can see that the gap for or things like that gap is here, we will be discussing that, but not right now, but absolutely in the future, here is one more thing. If you want to set some by default limits, you can set that. You can see that here again, inside the tailwind dot conflict dot Js inside the theme and extend. You can put your new settings. I mean if you want to. So what it does is actually, you know, we have the 12 column grid. You can make it 16 column grid too by putting this simple command. I mean, you can even make it 100 columns. Uh Great. But I mean this is not necessary, but maybe maybe at some point you want, you know, 13 columns in one rod. Then you can go with this option. I mean, this is an option though. So in the next cast we're going to talk something more about the grids till then stay tuned.