Tailwind Essentials: Grid System | Grid Gap

CSS Tailwind CSS
Transcript

English (Auto-generated)

things we were missing in the grid. So I think we have to talk about it again a little bit but yes we have to uh the thing is we were missing the gaps. This is an important thing. What's the gap actually there is no gap between these uh you know the the columns and the rows so we can have the the the gaps. So simply how we can put the gaps is applying the gaps in the main in the main class. So I'm just gonna go there and this is the main class for now because this dave starts and ends at the very end. Okay so right here adding in this place and typing gap now I have an option that 012345 or whatever but this is this is a game value I can put you know the gaps I can put and then there is another value. The gap p xd zero gap 0.5 I mean you know I can go with zero or 0.51 or 1.5. So there is a value like you know like that 2.53 point five whatever but then there is X zero the X. Means on the put the gap only in the you know in the X. Xs. And then there is why which says put the gap only in the y axis. So this makes pretty much sense. So I'm just going there there is one more thing. Yeah absolutely this is the same anyway so if you say just simple the gap I'm I'm using the gap for saving it to go into the browser going there, you can see that there is a there is a pretty much big gap you know around each row and that looks you know neat, that looks fine. So that is I think something good we did with our application finally but if I want the gap only in X. X. X. Is so there is a gap but only in X. X. As you can see that simple simplified, I want the gap only in the Y axis so save it. Now there is no gap in the expert the Y axis, you can see that there's a gap, there's a gap, there's a gap there is no gap in the X. Or in the in the X axis but if I just simply don't put the excess don't mention it. So there is a gap um you can see that there is a gap all around X axis and Y axis both excesses. So I think you know both works according to your situation. You know sometimes maybe in your application you want the Y axis gap in front of you Xxx gap so it depends on your application but kind of this is how it works and this makes sense pretty much okay. Um This is this makes things easier and clearer now with the gap and we also have a few more things like you know justify content to justify items justify yourself so if you're going to have a separate cast to cover these ones and then the aligned one, so until then stay tuned.
115 Views 0 Likes 0 Comments

In this Cast, we go over the grid gap property.

Comment
Leave a comment (supports markdown format)