Tailwind Essentials: Grid System | Gird Rows Span

CSS Tailwind CSS

English (Auto-generated)

everybody in this video, we're going to talk about the grids again. And in this video we're going to talk about the grid roses specifically. But we've discussed about the columnist pan. Now we're going to talk about the roads span. So I mean if you know the bootstrap the bootstrap logic, I mean, you know in the bootstrap you would have the uh, the rose pans, the economy spans. So similarly we have that here too. But the method of creating the rose and the rose pans are different here. So we're gonna have uh we're gonna have a new technique. So this one, I mean, you know, we can have three rows in each column in each grid actually. Okay, so this is a grid, one called one row to row, three row. But we can also say say that the first one should Be spanning into to call two rolls instead of vulnerable. That makes ah some kind of sense. So let's just try if I go there and I right row span. If I write rose pan one, that is already we already have that. So I'm gonna write the rose pan too and I save it, I'm gonna go back to the browser. This one is having the space of two rows. Ultimately it's still only three rows in each grid, but one row is having this space of two rows. So I can even make it three rows pantry. So now this alone is having a space of three rows and then you can see that the other data actually we've got a new column here. Now let's just do it ruins plan for and it's you know it actually changed Stings because of the rose painful. It is you know crossing this the authority of Grid Road three because this alone role is having the forest pansy because of that. It's absolutely changing the holy structure of the further data. So it is you know over units surpassing the the you know the authority of grid Rose three because the roads planned for is actually making this one is planning for four rows. So once this one has four rows, all of them has the four rows. This is the simple logic. So It is not good if you you know you have three here so this should be 42 or max whatever. But you know anyway so this is how it works. Um If I put the you know Rose Bantu, it's absolutely gonna have the tube. But if I go to do some further data for example this one and I want this one to be let's say again, rows span to save it, go to the browser. There is one more you can see that. Um Okay this one this one probably in fact not probably but 100% but that was there but when you made it it's planning to rose. So there there was no ability. This one had no ability to be here And to create a new role. It always pan into two rows. So it just went to the next column and then expand itself into two columns. And then you can see that won the two columns and then one and one. So it's absolutely again making the same thing the span four actually the Great Rose for already here. And so this is not what it is. If I make it three, save it. Okay, mm hmm. I did something wrong. Yeah, I did something wrong. Save it, go there. Okay, now you can see that. So this one, this one is there, you can see that and uh It is mixing with about one. I think we need to have a break from that so I can do one more thing. I can simply delete that because we do not need them anymore. Um clear this one, save it, go to the browser back and now you can see that only the rows now. Okay, now I think this makes sense. Now I can even make it this one, the new one up to three. If I make it three, save it now it's going to go to the next next absolutely next one because there is no space for the third one because the third one is already gotten gotten by the above one. So this is why it is on the next column. So now I think the you know the rows and columns, things are pretty much clear. You can also have the you know the Rose panel logic. So we're gonna move on to the next topic until then stay tuned.
74 Views 0 Likes 0 Comments

In this Cast, we go over the span property on rows.

Leave a comment (supports markdown format)