columns. I mean again we're going to talk about the columns but there is something new, We're going to talk actually, previously we were able to choose the grid, we were able to create the credit and we were able to understand the columns. For example, the grid calls to means we need the two columns, you know, in in each round. The next one is Now you can see that in the next line. So this makes a grid anyway. Um for example, for example, if I want, maybe I want three columns in one grid, so we have three columns, so all of them would be in the same column, I mean in the same raw, That's awesome in the same grid now, but maybe um maybe you want the, you know, you want this column, I mean the first column to be bigger. The second column to be smaller. The third column, maybe, you know, medium or something like that. I mean, you know, you can customize the sizes of each column and how you can do that. So let's just talk about it. So we just said we need, you know, here, we just mentioned, we need almost three columns, you can see that um that is understandable, we just need three columns. But this column, the first column should be covering like, you know, two columns. This should be a little bigger. So how you deal with that, you just go there and you're right before the color, I'm adding this call span, Let's say um wait a minute to call span to these are these ones has nothing but this one has the call span two. I'm going back and you can see that it's it got bigger now. It consists two columns. Okay, the one column is now consists do column and the grid actually can Can have three columns in one raw in one line. So this one consists of two columns and this one is one column. So ultimately three columns are here actually two columns but covering the space of three columns and the actual third column is now in the next line. So kind of understandable. So when you want, you know, such kind of tablet actually this kind of template helps us create an actual website because in in in an actual website, everything cannot be in a similar, you know, symmetrical size because, you know, maybe you want a menu bar at the at the left side or maybe at the right side. So the menu bar should be smaller. The the content area should be bigger. So you can just, you know, you can just use these things. So in the menu bar we actually, instead of making it fixed with three columns because this makes a little mess because, you know, you have two choices. You have three choices actually because of three columns only. Either you can have the column with the as it is or you can have it make two columns, which would be Covering this 75%. Sorry? um Um how much it is, let's say 30 for 34 and 34 makes the 34, and 33 makes 100, right? So somehow 70, 60 or something. Anyway, whatever we can google that but I mean a big part of this but still it is fixed. But what if you do it, you know, you make it 12 Now we have 12 possibilities. You know, if I go there, you can see that these are small now but now you can say that the first one should be like you know, Col Span six. So ultimately from these 12 column, this one is having 50%. You can see that the second one can have like you know um like you know the second one can have call Col span um let's say three and you can see that the next one is still one because we didn't provide any intel to this one, but we can make it three and the three col span three. Save it go to the browser and you can see that this is it you can make it called span four but absolutely. That's gonna break the system because 64, 10 and three makes 13 and we can only have the 12 columns. So ultimately you can see that this one is now in the next line but you can make it too. So when you make it too, you're ultimately going to get it inside the, you know, inside the column. So when you want, you know, when you want different Size of columns, it is preferred that you use, you you put the 12, you create the 12 column grid exactly. Instead of making three column grid or maybe, you know, for column grid or whatever. So I think uh this makes sense, but you need a lot of practice because I know it can be tricky someone who came from the, the bootstrap background. Absolutely. This is going to be very simple and very easy. Just a little change of name and things like that in the bootstrap, you do not need to mention the grid column size because uh in the in the bootstrap, actually, you know, when you just define the raw, it ultimately means now you can create 12 columns inside, but there is an edge in this language, in this CSS framework that you can mention how much column you want to define for this grade. So maybe it can be 12 column, 12 is a mix for now, but maybe it can be only six columns. So when it is six column, when it is six columns, you are gonna, you know, divide the grid between these between the six columns. So this can be, if you want to make it half again, it has to be three for now, it's gonna be the whole, you can see that. Okay, now, one more thing, I think uh you know, because we said that the grid column should be six. So if we have multiple lines. Each line can only have six columns, you can see that the six of the sixth one this one is consisted of six columns. So it's covering the whole line. The second line or second raw is actually four and 2. So second line is consist of four and 2. So The 6th column, if you create another one this I'm just gonna copy that for now and like that and I'm absolutely going to change the color from, I'm gonna make it orange let's say yeah orange. Now you can see that the sixth And then six. And then to that this too is in the third line because no matter how much data you put you're going to have new lines but each line can only have six columns. So you need to divide in between the six columns. So if you want this one to be half of the grid. So because we have the six columns grid and we can have the max 12 column grid, so you can make it three when once you do the three you can see that it is covering the half and you can make it to now you're gonna see that the two is there. But it's still um you have to make it 11 and the one and save it now you can see that 3111. So three and three equal to six. So now you got everything in one column, I mean in in one grid, in one line of the grid you can make it again 12 and absolutely now because the total of all these columns are now six, so you're gonna have only half the covering and half is empty. So I think uh I made things very clear about the call span call span 123, you can use it till 123. here it is, I opened the, you know you can you can also use the auto. Auto always by default value. I mean auto will divide, you know if you have full columns, ultimately the auto will divide them, you know in the same size. So anyway it is like you know if you have it, you have the grade of eight. If you put auto you do not need to put auto by the way, but if you have the grid of 12 and you have 1234. So each would be divided as called span 4444. So the auto will divide you know the data automatically by you know dividing equal values and completely 12 columns. So I think that that makes sense. Okay, so these are the call spans but there is one more thing which we are going to cover in the next video. So calls span here it is and then it starts the um the call span start 123, what is this? We are going to talk about the call span 123 by the next video. So there is an example of the call span um they provided we already had a discussion so we can have only three columns in each grid. So 123, but in the fourth one we need the fourth one is pan to two columns. So this is planning to two columns, so there is only one in the fifth one and then 61 is in the next line and the seventh one again it's planning into two columns. So I know I understand it can be a little tricky for the newbies if you you're not coming from the bootstrap background but I highly suggest practice. Makes perfect and you are going to get it sooner until then stay tuned.