Using Tailwind CSS Grid Classes

[Music] hey chris sev here in this video we're going to talk about tailwinds css grid classes the more i use css grid the more i realize how powerful it is so in this video we'll do a lot of css grid kind of fundamentals but also use them in the tailwind world with tailwind's css grid classes and i didn't realize how good the tailwind css grid classes are i thought it was going to be really hard to translate over into tailwind but it's actually a really really nice syntax so if we are looking at the display properties under tailwind css down here in the layout section on the left there we go display grid is the one we want so if we want to set something to using css grid we're going to give it this grid class just like we would have given a flex class or a block class or any of those other layout classes so to go further here let's scroll down into the grid section and these are the main grid css classes we're going to need for this video and grid template columns is where we start so there's two things to css grid that you need to know and you're going to set a number of columns and you're going to set a number of rows so you're basically defining your overall grid now the cool thing about this is that css grid is more for like 3d layouts where there's an x and y axis and in flexbox you're just usually talking about a single axis or a single axis here but the cool thing is that you can mix and match both and use both of them together to create some really really cool layouts i'm going to go into codepen here brand new codepen haven't touched it yet i'm going to go into our css settings here scroll down and i'm going to add the tailwind style sheet and we're at 2.0.2 for our version click that and now we have the css class style sheet here all right so let's hit save and now let's see if we can't build out a css grid with tailwind pretty quickly let's start by giving ourselves an over encompassing kind of section we're going to go div and let's do a class in here and let's go for background of maybe blue at 800 actually let's go light or blue at 400 let's go min height is screen let's go flex and let's go for items center and justify center so we don't actually have anything i'm going to do a div here and say grid goes here and let me increase the size on this let's go to 18. cool so next up let's define a grid let's say we have a grid of maybe 10 items actually let's go for 9 so that we can do a 3x3 grid so we'll say div and let's say a number in here times nine and i'm using emit for this so press tab there and now we have a grid of nine different items sorry we don't have the grid yet we just have the nine items so let's show how easy this is to make a three by three grid we can say class grid this grid class won't do anything on its own except for set display to grid but you see that nothing is really laid out here to do this we're going to need to actually define our column so we're going to say grid columns three and now we should have three columns there we go so we have one two three four five six seven eight nine and you'll notice that we didn't have to define the number of rows we wanted as soon as this thing got two three columns it said okay just go to the next row so it kind of auto creates the rows for us if we wanted we could say grid rows three and that would be building out a three by three grid now the cool thing about this is even if you set this to grid rows two it would still overflow into the next row which would be the third row so i kind of like leaving out the grid rows because it'll just auto flow into the next row unless you really really need to define a specific grid okay so let's give these a little bit more styles just so we can get something that looks a little bit cooler i'm going to select all these class let's go for background is uh white and let's go for padding is three rounded and that should be good right there okay so now notice that we are here but we don't really have a gap in between these so something that you might think to do is say okay well that's easy enough let's do a margin right of two margin bottom of two but then you kind of have to manually do this for every single grid item which isn't the most efficient and let's say you added more grid items or things started moving around it's not the best for laying out your grid so grid comes with a really cool thing and the tailwind classes come with a really cool thing to mirror that we can just say gap is to and that will build out a gap in between all of the grid items and that's amazing because in flexbox you would have had to define margins on each one in grid you just say on the parent hey i want a gap of two and it applies it to everything so what we could do beyond this is add even more rows or sorry more items and it automatically flows correctly and the gap stays where it should be now to take this a step further we can actually specify the gap for a specific axis so we can say okay i want a gap of y of two and now that will only give a gap in the rows and i can say gap x of two and you can even mix and match so say gap y of four so the gap is bigger for the rows than it is for the columns or you can just shorthand this and say gap is 4 all the way around and that would be an equal gap in between all your items so that's a very very cool thing there i want to talk about two more really cool features in tailwind's css grid classes the next one is for responsive we can say okay well grade columns three and since we're doing a mobile first design we say okay probably we want one column on mobile so let's get everything to one column on mobile but let's say as we grow to bigger columns bigger screen sizes we probably should show more columns so we can say here on medium screens grid columns of two and on large screens grid columns of three so now as we go along and we start stretching this out there's two columns there's three columns and you can mix and match those classes using css grid so that you can build out some really really strong grids for your websites apps whatever you're doing with tailwind so that's really cool there let's see you can also build out rows doing the same exact technique the final feature that i want to talk about in this video is the ability to create grid sizes that go beyond the specified columns so what i mean by that is let's bring this back down to the three columns and let's say okay well this is cool and all let's bring our gap down right here i probably want a different grid than just this equal 3x3 grid i could want to do maybe a sidebar on the left here i could maybe want to do like a big three across on the top or two across taylon comes with some really cool classes to do this let's go take a look here we have grid column start and end and we have grid row start and end so if i hit this you can say column span 1 column span 2 and this will basically say hey i want you as a single item to span two columns everything right now is just spanning one column so let's go back to our code pen and say okay for this first one column span two and just like that you have this one span two columns everything gets auto flowed down to the next row and everything looks pretty clean and you can mix and match wherever this needs to go so let's say on the 7 column span 2 right there and that goes out to 2. so you can build out really really amazing grids you can put like background images on these so that they start flowing you can create kind of a masonry grid uh style you can also do row spans so let's say on three i want to span two so let's go here row span actually let's do three and see how that looks and there we go so that spans three down there six seven gets bumped down because it can't just take up this one column it has to take up two like we told it to and now you have a really cool kind of layout and it was really easy to create because all we had to do was some grid classes which tailwind made really nice for us so i hope that was helpful you have grid classes that are easy to use you have responsive capabilities using tailwind's grid classes you have the ability to create these really really fancy grids using the spans and we have the ability to create a gap in between each section using the gap classes now there's more to the tailwind css grid classes here definitely take a look at those the autoflow auto columns auto rows one we didn't talk about but overall this video should give you enough strength in the tailwinds grid classes to build out some really cool layouts thanks for watching

Channel: DigitalOcean

Views: 4,505

Keywords: DigitalOcean, Digital Ocean, Cloud, Iaas, Developers

Id: 43x3kg99ipk

Length: 10min 4sec (604 seconds)

Published: Wed Jun 15 2022