Tailwind Essentials: Justify Content

CSS Tailwind CSS

English (Auto-generated)

talk about the grids again but not exactly the grids or grids gap but the justify thing, I mean how we can justify the content we have in the grid. So there is a there is a thing we have in the in the tailwind like justify start justifying in center between around and evenly. So we're gonna talk about them. So we would understand how it works and how it helps. So there is an example there showing that if you use the justify start it actually Mix The content one sided uh in the start, I mean in the left side, if you do justify center so it makes the center I think let's just go with the practical examples. So I'm going there and to the main role. Sorry, the main grid actually this one is the main grid and I'm going to apply justify start. Okay, I have the options, you can see that I'm gonna go with the justify start and for now I'm not saving it. I didn't say that yet. You can see that for now it is exactly the same. Okay, now I'm going there, I'm saving it so I just saved it going back to the browser, you can see that the content is now justified at the um left side. You can see that it tries it best you can see that because inside the content, I mean inside the rose there is no space left so it did it best to make it to the left. Okay what if you write justify and just save it, It would be doing the same on the right side. I mean the ending ending content. Okay, so there was a thing but there is one more thing, you can go with the justify center center, save it, go back to the browser and you you can see that now there is there is some space, there is some space and the content is justified in the center. If you simply just don't put anything, you are going to see the change, the content is spread around the whole area and you can see that there is there is a space left inside every column. So now you can see that these spaces here. So actually by applying to justify center or justify, you know justify content, we were having no space inside and we were having the you know the content justified. Okay, so similarly when we talk about the between and around so there is a little thing, if you go with the between and I save it and I go there to the browser, you can see that now actually it is not at the right side, it is not at the left side, it's actually having this space between the content. You can see that each content has uh extra space now, I mean each column has some extra space and this is how it's just you know uh spreading around the whole grade. Now I'm going with the justify around and you can see that actually the difference between the justify around and justify it between. It's actually it's also justifying it around but in justify around you can see that there is a space here, but also before the first column and after the last column there is some space and each column has similar space as the start and the ending columns has but in the justify between you have the space in between but the the starting and the ending point has no space, no extra space. So this is the only difference between the justify around and to justify between. So I guess things are easier now, much better now there is justified evenly. It is you know, it just makes some little changes in this space. Otherwise it is likewise, it it just behaves similarly. You can see that now it is actually distributing this space evenly. So that's how it works. So we just covered the justified content in the next video. We are going to cover something more, something different until then stay tuned
141 Views 0 Likes 0 Comments

Learn how to justify-content using Tailwind CSS.

Leave a comment (supports markdown format)