Complete CSS Grid Tutorial using Tailwind CSS

[Music] hello and welcome to tyrus web development tips and tutorials this video is a complete guide to all the available css grid utility classes in tailwind css i will not just be using some colored boxes to explain the concepts here instead we will learn how to implement real world layouts and also customize tails and css to help achieve some of them grit and flex are two of the most confusing concepts in css i have covered flexbox in the previous video i highly recommend watching that first if you aren't very familiar with flex utilities now this video is for grid if you already know the basics of css grid that's great but even if you don't know much this video will help you understand the concepts better grid is a method that allows you to layout elements in a grid format which means in two dimension unlike flex which is helpful for placing elements in a single dimension grid is a lot like html tables with rows columns and cells but with a lot more control when it comes to sizing positioning alignment and responsiveness now let's start with the simplest grid layout of multiple rows and columns with equal width and height we see such simple grid layouts every day on youtube homepage like this or your ecommerce websites like this or your instagram like this and so on so let's use our first set of tailwind css utility glasses for grid which are grid which sets the display property to grid and then grid calls with a number now don't worry about the left side if you don't if you're not familiar with grid using pcss let's jump into practicals right away we have one video div here in the css i've added some glasses for video just so that you know it doesn't get cluttered here so it has some padding background color shadow and so on now let's make five more such divs five more such video blocks assume there is a video in each of these divs okay so we have totally six video items now let's turn this into a simple grid layout so a grid layout is similar to flex it needs at least two elements one parent and one or more child elements so to turn this into a grid let's add the first class grid to the parent element now this does nothing because we will have to tell the browser how many columns how many rows and so on that's where the next class that is grid calls comes into picture so here as you can see you can use 1 to 12 columns entailment css now let's say we know that we need three columns of equal width so we will add grid calls 3 isn't that simple in pure css for the same thing you will have to write something like this we use grid template columns and say repeat 3 and so on we'll also break this down in a while now all these are stacked up too close to each other we want some spacing in between right that's where the next utility class comes in that is the gap utilities column gap row gap and gap in css but in tailwind it's gap x the number gap y number and just gap when you want it in both the directions let's see how this works to add a horizontal gap let's do gap x 1 2 3 and so on and for the vertical spacing we could add gap y maybe the same amount 6 to add the same amount of gap for both horizontal and vertical you could just keep it gap 6. now the reason we're not seeing the same amount of spacing is something else but trust me it adds the exact amount of spacing all right now next let's make this responsive already so on small screens uh we don't want three columns right we just want one column so let's say grid calls one and then as you move maybe somewhere here at the sm breakpoint let's say grid calls to okay this is not sm yet yeah somewhere here and then at md breakpoint let's make this grid calls three right so that does it all right done so this was about the simplest grid layout of equal width columns with equal sized items which probably covers at least 25 of the use cases shall we try and understand what exactly is happening behind the scenes this actually just one class we need to understand one of these grid calls one two or three right so let's look at this it uses this property grid template column so if you're familiar with pure css and grid template columns you might know that this takes in a variety number of values i'm not going to go into all of that but here what it does is it repeats it three times so if you want the same value for all number of columns that you need you can use this repeat function so if you need four columns it's repeat four repeat five five columns and so on and here this is the width of each column in that grid and that's again using a function min max right so it's 0 at the minimum and 1 fr 1 fr stands for one fraction at the maximum so here one fraction means all three are equal as many number of n number of items all of them are one by n width that's at the maximum which is why here it doesn't care about this gap so the grid is invisible here but actually the first grid ends here this is where the first uh you know grid column ends this is where the second grid column ends and this is where the third grid columns end this is all you need to know for now so let's say we don't have this width so this is what happens right so now you see the gap remember i mentioned that you're not seeing the same gap yes now you do see the exact same gap in between the rows and between the columns all right now to demonstrate the next set of concepts let me remove all of the responsive functionality just for the sake of simplicity and you remember when we had the width here we had a specific width let me add it for just uh sorry let me add it for one item so that you notice this is where the grid column ends but we have the item aligning to the left of the column right now these alignments can be changed using justify items css property this has the values start end center and stretch and then the tail when the equivalent is justify item start justify items end and so on so let's see this in action so by default this is justify items stretch that's why you're seeing all of them are stretching instead if we change this to justify items start this i'm sorry to change this to justify items start this is what you will see we are not seeing any changes here because the width is fixed but otherwise this is what you will see all the items will occupy as less space as required and then move to the start of the grid column horizontally now instead we change this to end this is what you will see everything moves to the end even the fixed width item you make it center everything centers and then like i said by default it's stretch okay great so this is about horizontal alignment what about the vertical alignment right now this is the height of the body we don't have anything below that but let's make this grid occupy full screen how do we do that let me just add a min height screen to this and you immediately notice that now the grid is occupying full screen and each row occupies half the space great but even here the vertical alignment of each div is such that it's at the top of each row right so that's again because we have limited the height so if we remove this this is what happens okay so let me remove it for just one of this and let's see how to change the alignment of the others for this the property used is align items for horizontal it was justify items similar to flex and for vertical alignments its align items again so it takes the value start and center baseline and stretch the tail when equivalent is item start items and and so on we don't have the align keyword let's see this in action again so let me add it here items start so you notice that we have no height mentioned here again i'm sorry about that yeah so item start we don't have any height mentioned so what it does is takes it takes as less height as required for that block items end pushes everything to the bottom of the row items center push makes uh sure that the items are in the center of each row item stretch was the default that's what you saw at the beginning when we didn't add this and then there's something called items baseline though it looks almost like items start there's a little difference to demonstrate that you let me remove uh this all these classes here and this is just simple text it it doesn't have any padding or height or anything and now this is what items baseline does but if you change this to items start you notice it just aligns at the top of the div but what baseline does it aligns it along the text at the base of the text of other grid items this is very nice when you have to align some images and some text in between you don't want the text floating to the entire top correct now let me change this back to item center and i'll also add the video or what i'll do is i'll remove all of this entirely so that we can move on to the next set of concepts great so in case you wondered how do i make this uh make these two come together right because no matter what you try to do with align items they are far apart so far with justify items and align items we saw how to align these items horizontally and vertically within the grid cells correct now let's see how to align the cells itself within the grid okay this might sound confusing at the beginning but with a little practice you will understand what the difference is so this can be done the horizontal alignment of the grid cells themselves can be done using the justify content css properties not justify items but justify content so this has quite a few similar values like start end and center there is no stretch here but instead there is space between space around and space evenly we will see what that is with the tailwind equivalent utilities which is just justify start justify end so there is no justify items here and there's no content also it's just justify start justify end let's see this in action but this is not a good example for you to see this property in action because this grid calls three that we have it makes sure that no matter what each grid column is one fraction in width right so this these properties don't apply when the width is one fraction each instead let's make some change here so instead of grid calls three let me add another class so let me say just grid custom and here i have already added this uh class here grid custom everything is same grid template columns repeat three min max the only change i've made is i have replaced one fr with max content so what it does is this yeah you can already see the result here it just occupies the maximum content that is within this so in case we have a bigger text here so something like video is here you see it doesn't wrap the uh text it just occupies as much width as required so that's what max content does let me leave it as it is for the demonstration so you know right if we make this one fr it just occupies one fraction each now let's try out our justify content properties so the classes are justify start which seems to be the default that's why you don't see any change here let's try out justify end so you see this is different from justify items in justify items what happened was the items shifted within that much space but here you notice the whole grid itself shifted to the end the same thing with justify center then comes justify between so you see similar to flex and um yeah similar to flex there's as much space in between as possible justify evenly it distributes the space within between and around the elements evenly and the same thing if you change it to justify around it divides the space in such a way that you get more space between than around so sometimes this is helpful let's leave this at justify center for now and just in case you're wondering how do we get these two together because this gap looks really bad that's where the next set of properties come and if you have guessed it it's not instead of justify content because this is for the horizontal direction it's aligned content which is for the vertical direction so this again has the same set of values center start end and so on and the tailwind equivalent because again we don't have the align keyword it's just content start contents content center and so on let's look at the demo so when you make it content center or the whole grid you know comes in the center right it occupies as less space as possible content start does this everything shifts up content end everything shifts down content between this is what it does it gives as much space in between as possible content evenly like we saw with uh justify evenly it distributes the the heights equally between and around the elements then content around again gives double the space here compared to what's around i know i know all of these will be confusing at the beginning you don't know what to use when yes that happens so in the beginning don't bang your head too much just try if you want everything in the center just try both justify center and content center whichever works it works for you just stick with that slowly you will understand the concepts great so let's revise we saw the grid class which is added to the parent element to convert the layout into grid then we saw that we have number of utilities like grid calls 1 2 3 up to 12 which what it does is it creates equal width columns there's a similar one that is grid rows 1 to 12 which also can be used i just didn't demonstrate that here but you can try it out on your own then you saw the gap utility classes for horizontal vertical and overall gap then we saw these justify items start and center and stretch for horizontal alignment of items within the grid cells then the same thing for vertical alignment within the grid cells which is items start items end and so on then we saw the justified content which tailbone equivalent is just justify start justify end this is for the alignment of the whole grid itself and then we saw the content center content start for the content alignment in the vertical direction next as i mentioned already some of the use cases are the youtube videos that you saw in the grid format e-commerce instagram but there are some more uh which i would like to show so if you want to achieve something like this the pricing section of a website so here it it uses equal width columns so you can simply use grid calls 3 and achieve something like this yes this is responsive as well this is on codepen it's not mine it's taken from uh it's picked up from codepen the link is given in the description below so this is not done using tailwind so you see um this is what grid calls will do for you and then after the sm breakpoint is where grid calls three can be used until then it's grid calls one but did you notice something the advanced membership was the third on larger screens but on mobiles that came first now something like this is very difficult to do using float or any other layout type yes with flex it's easy and then with grid you will notice that it's even more easier so advance comes first basic comes next and then comes free while here it's the reverse right free and basic and then advanced now let's see how to do that using grid i'll use the same code only thing is i'll remove these three and i'll say so i'll say free basic and advanced but let's start with the uh you know mobile layout and of course i'll make this grid calls 3 remove all of this and all of this as well grid calls 3 but only at sm break point until then its grid calls 1. okay and if you need an overall padding you can again add that right here p6 maybe yeah but here on mobile since we saw advanced first let me add that first actually in the html itself advanced basic and free so this is the mobile layout great so what about on larger screens we want advanced to talk to come here correct very similar to flex you can use the order classes for this item just say order three that's gone there we want basic next so you can say order two right this is how it is we have free basic advanced or you can even do order last for this one remove this and say order first that does the same thing that's just your preference here is a blog layout with some blog posts arranged in a grid layout this is very simple you just have to do grid calls too and grid rows too uh if you don't need to mention the rows if you don't know how many rows just add grid calls too and leave it at that and how many other items you add they just keep coming one below the other you can try this out on your own let's see another example next look at this page the moment you look at it it might not look like a grid to you but if you notice deeply this is just one column here this is another column here but this column is twice the width of this column and this then just there's just one single row here that's okay but it's very easy to uh create something like this using the grid layout so let's see how to do that using build let's just add two divs let me copy all of this uh this is getting copy too let me just copy this one for now this is a h1 all right so i've just added some glasses to make it look neater let's skip the second heading and paragraph i'll tell you later why and now instead let's add this div that had some actions okay so let's just say actions and then actions probably a h2 i'm not going to style this too much for now and just some links here i'll just say link one link two and link three let me just add some background vg gray 50 or 8300 and then some rounded corners okay of course some padding great now if we turn this into a grid layout by saying grid and grid calls to because we have two columns this is what happens so it divides it into two equal width columns and we don't want that to change that you can either create a custom class like you know grid template columns and instead of saying repeat to whatever you can say 2fr space 1fr so what it does is it creates the first column with two fractions with and the third one with one fraction width but we don't want to use custom classes because there's another way to do that using tailwind now instead of saying grid calls 2 let's say grid calls 3 and there is a third grid here third grid column here we just have to move this here and expand this to occupy both the columns actually not too complicated at all simply add a class to this saying call span 2 okay that we're just saying this column to span two columns that's it you have the spanning two columns now we only have to add a little gap and we can add a gap x of 6 and you have it great so this is how you can make use of the tailwind utility classes you don't have to create custom classes for achieving weights that are like double or triple the amount of other columns instead you can simply use the call span utility classes now this layout is not just this much we could achieve something like this easily but let's look at it let's make this responsive did you see what happened now and in smaller screens we have this first para here then come these two blocks and then we have the next para here on slightly larger mobiles look at this we have these two stacking next to each other not one below the other but next to each other so this in itself is a grid layout and this is another row so right now what you see here is actually a grid with three rows and two columns do you see that yes and when you go to larger screens now you see again a grid layout with three columns like we created before just that the first item spans across two columns shall we now try and implement this so let's try and implement the mobile screen first so we have something similar actions and then related stuff so i'll create another div for now let me just remove this and let me add another div where we have that second heading and paragraph and copy this okay so we have something almost similar just that we have to add a grid with grid calls one so that we can add a gap of 6 so let me make it gap y6 i'll have to remove this call span 2 here now this is almost what we need but on slightly larger screen so maybe at sm break point what we want is we want these two next to each other there are multiple ways to do this but what i would like to do is add these two within another parent so we have a grid nested inside another grid so we give this parent also a grid layout and say grid calls 1 because that's what we need at mobile but at sm breakpoint we need grid calls too okay so we have this stacking next to each other let's give this also a gap so gap x 4 or let's make it 6 and make it even and this also i'll add only at sm break point this is great now what about md break point we want this to shift entirely to the right how do we do that so at md breakpoint we don't have the red calls one instead we have grid calls three but this is what it does let's solve one problem at a time and we will make this uh come one below the other to do that at md breakpoint let's say grid calls one again and let's remove that gap gap zero so that at md breakpoint this is what happens so you notice this is stretching because by default the con the content stretches uh so let's change that by adding at md breakpoint let's say content start so that aligns the content at the start of course at md breakpoint we also need a vertical gap so gap y of 6 this fixes that problem great but what about making sure this comes down below this first let's make let's add a call span 2 to the first div and we need that only at md break point so md call span 2 all right so we already have that solved let's also add a call span 2 to this one so that's also solved now the only thing we need to do is we should remove this gap we should somehow bring it up right and actually that's quite simple the way we did call span 2 here we need to add row span 2 for this because right now it's occupying the first row in the grid right so here at md breakpoint we just say row span 2 that's it so it's spanning across two rows so this whole grid was occupying two rows before because we made this call span two and there was no space for this this went into the second row and that's why it was starting from here now that we did row span 2 this occupies both the rows and which makes you know which makes this cell occupy only this much height and this comes below isn't the grid layout so helpful now i didn't achieve this in just one go i kept trying different ways of doing this and with practice you will be able to do this soon because grid is actually complex great now let's move on to another example are you ready i hope you are look at this web page similar to what we did in the previous example here if you make this responsive you see that the mobile comes first whereas in the larger layout this mobile was in the center here both the other divs come one below the other in slightly larger screens this is what you see the mobile is on the left and these two occupy both the columns here so this occupies one column and these two divs occupy both the columns and here what happens is this comes here the mobile comes at the center and this div comes to the right shall we try and implement this it's not going to be very hard after the previous example all right so let me copy the link of this image so copy image location if let me paste that image here then we have two more divs with the features so let me copy feature one two and three i'll just add some br tags please don't mind okay and i will just copy paste this once again change this to four five and six right so this is almost what we have on small screens don't mind the other styling uh right here the spacing and everything that's e that can be easily added so now let's add a parent element to this entire content here so that's a div all right so let me add the grid class first and then say grid calls one because that's what we want at the uh for the mobile screen then at the sm breakpoint what we saw was the mobile was here but these two divs shifted right here for that let's say at sm breakpoint i want grid calls 2 this is what it does like we saw in the previous example this can be easily fixed when you give a row span to this image here so let me say at sm breakpoint row span 2 what it does is it makes this cell shift right up here there are two cells again here but this is spanning across both the rows great next of course uh if you want some alignment let's also do that sm since it's horizontal alignment of items within the cells it's justify items center you can also use content center and see what happens nothing happens right so let's just use justify item center okay slowly at md break point what happens is we see this in the center the first div on the left and the third one on the right so first what we do is at md break point let's make this grid calls 3 this solves most of our problems we only have to add this here and this here for that like we saw there is an order property which can be added here so let's say at md breakpoint order first that's it just that this is right aligned so which can be easily achieved again just say md text right okay this is what you see correct now we want these to be center aligned red like you see here now that can be done but first we need to remove this row span to for md breakpoint don't forget that otherwise we wouldn't be able to achieve this in any way so make this row span one and then to the parent container you just have to add either item center or content center if you don't know which one just try both let me try item center first yeah that works that's because we are aligning the item within the grid cell to the center okay how did you find this example i found it amazing this is a great usage of grid right i hope you're learning a lot now before we proceed into the next example i have some more utility classes to cover without any demo so i'll just be running with the theory for the next one minute so in regular css there's something called as the place content property which is the combination of justified content and align content so if you want to horizontally and vertically center the grid content you can simply use place cons content instead of two different utilities two different css properties and values so the equivalent entailment is place content center place content start so whenever we say place content start it means it's the combination of both the classes content start and items start okay very similar to this is the place items property and again this is similar this is the combination of align items and justify items so when you want the same value for both horizontal and vertical instead of using two classes you can use one single class also we can align horizontally or vertically individual grid items by using justify self so this is for horizontal alignment the tail when the equivalent is this justify self auto and so on and then for vertical alignment you have align self align auto again the align keyword is skipped it's just self auto self start for the vertical one then place self is the combination of align self and justify self i just wanted to cover this because these properties and classes exist just in case you want to make use of them once again let's revise what we learned we saw the order property and we saw the tailwind equivalent so order first is actually just setting the order property to 9999 and order last is setting it to the negative value 99999 in tailwind you can just forget about the value and directly set order first and you will know for sure that it's gonna take the first position then we also saw call span 2 row span 2 3 4 whatever values you can use up to 12 you can also use call span full same goes with row span if you notice the regular css syntax is quite confusing but until then you can simply use these and be sure let's come back to this example and i want to show you something for some reason now let's reduce this image opacity to 10 okay and for some reason i want this whole div to span across two columns but also overlap on this image so i don't want any change in these two disks just that i want this div to overlap on this this is not possible using flex this is not possible using uh you know float or any other layout this is only possible using position absolute but grid helps you achieve something like this so before i start with that i want you to know something called as grid lines exist so we don't see these invisible grid lines in between uh the rows and columns but they are called grid lines this is the column line one line two line three and line four and same with rows so line row 1 and this is like the row line 2 so if you want a particular item to start at a column and start at a row specific one you can use the row start and call start utility classes so in this case i want this to start at one so let me add call start one here and i have to add the md breakpoint and everything or it might not work properly and then i can either say call span two or i can say call end to call end three because this is the line three right if i say call n2 it's this so i want to say call end three because this is the line three and leave it at this i also want to say that it starts at the first row so not at the second it starts at the first line row start one but now the image and this div move downwards i don't want this i want the image to go back here so what i do is at the md breakpoint i say call start to itself now it shifted down it just tries to arrange uh to make sure that it doesn't overlap but if you want to force it overlap you will say md call md row start one okay so you see even this is possible so you can use the coil span row span utilities but at the same time you can also use these start and end utilities for row and columns for a little more control this is great we have covered almost 80 percent of the concepts we are just left with something called as auto rows and auto columns to demonstrate that i have taken random eight images from place image.com so far we saw that when we set grid calls 3 we set the number of columns the grid takes up as many rows as required for the items say for example now for this parent let's add the grid class and say grid calls 3 this is what we saw right it occupies three columns and as many number of rows required so if you add two more images here we get another additional row but what if we want to set the number of rows and then let it take as many columns as it wants to do that there's something called let's remove this the something known as the grid autoflow so by default it's grid flow row that's what you see but when you change it to grid flow column it first fills up the rows and then goes into the columns so initially it it just went one two three four five six like that right but here it does the opposite so let me demonstrate it a little deeper for you grid flow call and then i say grid rows two so this is what it does this was the second image so this is that image if you want i can just change it and show yeah so this is that image so it first starts filling up as many rows there are and then moves into the columns if we change this to grid rows 3 this is what we see grid rows 4 this is what happens so if you want to change the flow this is what you do now here let me go back to grid rows 3. now there's something else i want to demonstrate to you for which i will change this back to grid calls 3 and remove this so it's grid flow call or let me say grid flow row and now i want to add some call span 2 to some of the images so let's say call span 2 here call span 2 here and call span 2 to this as well so now you notice we have a little gap here and that's not what we want this is happening because it's following the default order this is the first image second one third and since there's no space for the fourth one which is spanning across two it just shifts to the bottom so how do we remove this particular gap so instead of adding grid flow row we can change this to grid flow road dense so the moment i did this did you notice the image that was here shifted up and it just occupies all the space that is available that's also possible with grid flow uh call tense it just works the same way but for columns so with something like this call span and the grid flow you can create beautiful masonry layouts something like this with images so you know you get let's say you add like so many more images and randomly you can say call span even you know say call spam 3 as well and see what this looks like right so this is what it does you can use this for a gallery and of course if you want some gap you can add some gaps as well all right so this is great i think we have covered a lot of concepts in this one single tutorial i'm sure you cannot digest everything at once unless you knew some great concepts already if this is the first time for you i hope you don't get overwhelmed with this take it step by step first just start you know uh start with some examples which just have you know fixed columns like two columns three or four columns and then slowly start learning the vertical alignment horizontal alignment and then about spanning and order and then the autoflow all right so good luck thank you for watching this was a very difficult video for me to create i had to learn grid for a lot many hours and then try to simplify it so do share this video if you loved it and learnt a lot thank you for watching hit a like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from tyrus

Channel: Thirus

Views: 5,052

Rating: 5 out of 5

Keywords: CSS grid using Tailwind CSS, CSS Grid tutorial, CSS Grid examples, Tailwind CSS Grid real world examples, Grid tutorial with Tailwind CSS utilities, Simplest CSS Grid tutorial

Id: kuY9MehvHh4

Length: 46min 41sec (2801 seconds)

Published: Fri May 14 2021