Tailwind Essentials: Grid System | Grid Col Start & End

CSS Tailwind CSS

English (Auto-generated)

party column, I mean inventing the column. So this is kinda kinda cool. So let's just discuss this thing um starting and ending is kind of different than the span but we can also combine it anyway so let's say um first of all I think if I just you know this is the The 12 the total grid column. The grid size is actually 12 columns. So we have 3111, so we have six columns in total here. I want the first one start at this at the point of where the second one should be started, the second column should be started. So he would be writing called start true and adding the space and nothing. Just save it, go to the browser now you can see that there is a space before that. If I say it should be started at the column of four, save it now you can see that it started at the column of four. So I think this makes sense and this makes it, you know this is this is how you can indent the columns and you can also combine it with the call spans, you can see that we've already combined it. So this is this is one way but now I am going to create another grid right after that or I'm just going to copy this one, copy the grid and be in the same container and I'm going to go back to the browser and this is the second one but I think the second one should have the first of all, this is this should be something like you know two copy to copy too and then to save it, go to the browser now, you can see that this is due. So this kind of you know defines it. We can also put this pacing between the between the columns. We will be talking about this pacing later. Not now. Anyway. Um so we got it. The second thing we need to do is we um we were doing something like mm hmm make it make it six. David, you can see that there are there is one because we made it total six column Okay, this one is three and it starts with four. So absolutely this Only one can be covered. So it starts from 4-5. So you can see that it's only covering this this much. And uh the second thing here is If I in the second line if I say it should be the column one and uh it should b call and three. Save it. So you can see that this is the starting this column is actually ending. Now there is a little difference between the start and the end. Actually we said that this should be the columns pan one and this should be ending at the column three. So this is now ending At column three and then absolutely we still have the place and space for the others. So it's going that way you can see that call three or you can say call and four. Absolutely, it's going to change the places now. It's actually this column is, it's starting, I mean, you know, kind of you know, it's it can be a little tricky, but this is just one column, Okay. And it's ending at four. So ultimately it has to start from the third column. You know, you do not need to mention the call, start, This makes sense. I mean, you know, Take it again, we are ending this column as the Column four. This column should be ended as before fourth column, Okay. And it is only one column. So this has to be started by the third column. So this is why it's starting from the third column. So I think this makes sense now and this is how it works. And uh these other columns are actually you know, automatically connected with the other one. So this is the starting and the ending of the columns. And I think this makes sense now. So this is how you can invent your data and you can, you know manage it. One more thing that you also can do the nested grilling, you can do the great things inside this single column. We will be doing that in the next cast until then stay tuned
76 Views 0 Likes 0 Comments

In this Cast, we go over the start and end properties of Col in the grid system.

Leave a comment (supports markdown format)