Tailwind Essentials: Grid System | Grid Rows

CSS Tailwind CSS

English (Auto-generated)

uh tailwind again. And in in this video we're going to talk about the grids actually again. But this time we're not going to talk about the columns. So we know about the columns. If we go there, you know, we uh we have columns like, you know, one column, second column, third column, and fourth column. And absolutely. This one column consists of, you know, we have to go back to the coding panel and you can we can understand that. You know, this one is spanning three columns and this one is planning one column, This one is one and this one is one, but this one is starting from four. So ultimately this is uh this is a single column or something like that. I mean, you know, so we already have the discussion of how the grid columns and grid actually works. Now we're gonna talk about the grid rose. So to talk about the grid rose. First of all, we need to create the grid again. So grid um Class name and grid space grid. Um Great. And roll. Now you have the option. I mean, I mean how much roles you want? Maybe you want the one role, you want the two row or maybe you want the three roles. So this is your choice kind of, you know, you can you can choose, you know like let's say you're gonna you're gonna choose three rows. So one more thing you need to add to make the balance grade flow column. The grid flow should be in the in the column manner. And I'm going to talk about that, exactly how it's gonna work. Okay, so we said we can have three rows in this grade. Now we are here above. We were you know, limiting the columns so we can have multiple grids. But you no specific columns only. But now we're telling that we just cannot have multiple rows in a single grid. So this single grid can have like three rows at max. So here I'm going inside and I'm simply creating a new div like that. And I'm you know, I think this is good too Copy. But no, I think let's write it again. So I'm writing BBg blue and I'm gonna I'm gonna choose the blues 700 for now and here I'm going to write the till wind grid rose. Okay. That's cool if I go to the browser and I've got it the Children uh grid rose. And I'm gonna just add a text text that end this pace uh blue. And I'm gonna write like, you know, 300 saving it go into the browser. I've got it but that is not really awesome. Let's make it 100. Now that works. That works better. Okay. Next thing is we actually have created a role and for now this role, I mean you know this dave is covering the whole row. Um let's just simply copy that and I'm gonna go down and he's thinking like, you know four times. Let's just let's just paste it three times for now and just change the color from the blue to you know I can make it um slate again. Okay this one can be, you know amber. Just save it. Okay now you can see that we've got three rows. Okay so the logic is we already got the three rows. So if we create a new div that can't be possible. I've created a new dave and I'm I'm choosing the color of this new dave as lime. Okay, saving it. Okay this one is the new one. So now we said we can have three rows in a single grid but we are having 123 and four rows. So what's gonna happen in the browser 123 and the next one is going to the next column but it won't go out of three rows. This is the magic. Okay and this won't work if I simply don't apply this one, if I cut this, you know it's not gonna work. So we have to have this. So similarly if I you know, I copy this like that and I go down and I paste it now I'm changing the color from from V. G. And let's just find out some more cool colors. Um not the stoners think like that. Okay amber is already applied, I'm gonna go with your Lyman's already applied by the way, let's go with the emerald and save it. And okay this is the new one. Absolutely. The new one will be in the new column. But Already there are three rose in the two columns for now. But now I'm going to copy the other 1233 rows off above. I mean three deaf. So paste paste paste. So how much we totally have right now? Um This is kind of tricky. I know that. So you need to focus, you need to watch this cast multiple times because I know this can be a little tricky but once you practice you will understand it. So I wonder intuitive three Div 4 div 5,678,910. Div 11, 12, 13 14. So we could have only um three rows and we have 14 days. So how they are going to just I mean how the the grids, how the devil's gonna adjust in the in the grid. So first we're gonna have three rows but absolutely after that we're gonna have a new column and then we're gonna have three more rows. So 336 now. How much we have left. OK Um 1214 We have so we at least have like, you know uh the eight we have left right now. Okay then the other three would be in the new column. The other we would be in the new column, go to the browser, you can see that one column. But you know this is the just random data. We just added different Dave's and we didn't we didn't say which one to be were we just, you know, straightly put the data and we just said that the grid should be three rows, not more than that. So, so once we got three ones, then then three next three next three next and then to next, if we put one more it would be here and another one. Absolutely. There would be a new column and then the columns with would be adjusted and we're gonna have anyone. So I think this is kind of uh, you know, simplifies the method of the grid rose very well. So be practical and apply it and you know, you know, have fun and be the part of the next cast. Take care.
58 Views 0 Likes 0 Comments

In this Cast, we go over the row aspect of the grid system.

Leave a comment (supports markdown format)