Learn Grid In Tailwind CSS | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS

what's up developers it's dary here and i hope that you're having a great day since we're going to work with the grid layout system before i continue on i want to quickly let you know that you can support the channel through patreon where you can get access to my private discord group where everyone is helping each other out with their coding issues so if you are interested to join the link will be in the description down below the grid layout system allows us to layout content on our website in a pretty easy way i won't be going too in depth on what grid actually is since i have a complete video on it with css which will be linked in the description down below in the next video we're going to use flexbox and there are a lot of discussions on which one is better the people here that follow me for a while know that i hate to make comparisons of what is better than another i prefer to light out the positive things of both of them instead of down talking one if you want to use something that is easy to work with floats and positions easy flexbox is pretty cool to use then but if you want to fine tune your layout overlap items create designs like two or three column layouts css word is the way to go so no i'm not saying that one is better than another they are both very useful in different scenarios if we navigate back to the browser open the tailwind tab that we had from the previous video let's click on the search icon and let's type in grid you can see a drop down right here with a couple great options let me actually zoom in alright but it's not like the others where you'll find everything that's related to grit in one specific video the main reason is that grid is a bit more complex than the other topics so therefore the grid topics have been separated in different chapters tailwind provides a lot of utilities that you can use in order to picture perfect your grid layout system the first class that we need to provide in order to set up our grid isn't listed right here whenever you want to work with the grid layout system in css you need to set the display equal to grid and since there's only one class and one property for that tailwind decided not to add it right there we will do it in a second since we need to add it at the top level of our grid otherwise the system will not understand what you're doing if you're applying other grid stylings then you can define your columns and rows for that specific grid so let's start off with the column first we need an option that's not available in drop down menu so right after grid let's add a space let's say template because we need the columns now let's click on the first option and in the left sidebar you can see the grid options that you have right here but for now let's actually zoom in as you can see we have class names and properties right there the class name speaks for itself we're going to define a grid dash columns so calls followed with the number of columns you want to define this will start from 0 and it will go up to 12 grids if you want to define one grid layout which is something you probably won't do you're going to add a class of grid cool stash 1. if you want to have grid items next to each other you're going to use the grid calls dash 2 up until you reach 12. if we take a look at the properties that we have right here you can see a repeat function being called this will basically repeat the first param so one two three and so on and what it will repeat is the one fr if you're defining criticals two they're saying well repeat it twice and what it needs to repeat is one fr now inside this list you can see that one fr is being called quite a lot fr stands for a fraction and this can be used when you want to define your grid like any other css length think about percentages pixel values or m's if we then navigate back to visual studio code create a new div inside our body when working with grids i prefer to use my parent div element as the grid layout inside your parent element you can create divs articles and so on for every single fraction what we need to do is to give a class to our parent element so let's say class what we want to do is to set it equal to a grid and then we're going to say well i want a grid dash cools dash 2. so i want to have two fractions inside the div so two blocks or two grid items whatever you want to name it before this works well let's actually save it and go to the browser refresh our local host let me actually zoom in alright this doesn't work since we haven't defined our grid items right now it's not recognizing anything inside the parent element that we got since it's empty so what we need to do is to navigate back inside our parent element create a new div let's give it a class of bg-red-500 let's change the text to white and let's give it a height of 24 then inside our div let's create a paragraph with the text of this is my first grid item below our first grid item we could actually duplicate it so copy it paste it right there and let's change the second background color to blue this is not my first grid item anymore but my second one if we save it and navigate back to the browser you can see that we aligned our second grid item to the right and we defined our grid layout system of two columns a cool thing about grid is the fact that you don't need to specify your rows css will automatically fill in the next rows based on the number of columns you have declared so whenever we add a new div to our grid which we will do in a second it will automatically detect that it needs to be placed right below the first one since we're saying that we want a maximum of two columns as you can see right now the columns are aligned next to each other without spacing in between you can indeed fix this by adding margin but grid has a pretty cool feature which lets you define the gap between the columns let's go to the talent tab that we have scroll up and let's search for cap in here you will find a complete list of classes that you can apply in order to add spacing in different directions the one that we will use and you probably will use most of the time is the default gap dash value so let's navigate back to visual studio code and let's apply grid gap when you want to apply a gap in between your grid columns or rows you need to apply it to your parent element so the diff of your grid class so right here let's say that we want to set the gap equal to dash 4. if we save it and navigate back to the browser go to our localhost you can see that there has been added a space right here in between our two columns and here comes the most important one this does not shift your columns to the right so outside of your full width this will basically make the columns you've got a tiny bit smaller so it fits inside your width another pretty cool thing about grid and i know that i'm saying that grid has a lot of cool things is the fact that you can't specify a start and ending point for an element inside the grid you can basically specify how many rows or columns an element should take up before we do that we actually need to add some more grid items so let's do that let's navigate back to visual studio code and let's change our quit course 2 to 3. let's duplicate our grid item all right let's change the third one to pg yellow and let's call it this third grid item and let's actually do it one more time and let's call this one or give it a color of bg purple 500 and this is my fourth grid item if we save it and navigate back to the browser you can see that we got four boxes with different colors but they all got the same size so do you always want to have that what if you want your first grid column so the red one to have a span of two columns instead of one and that's what i like about grid it's so easy what we need to do is to navigate back to visual studio code go to the well grid item that we want to span out and let's give it a class of call dash span dash 2. so we're basically going to say that the first column needs to be spanned out to the second one if we save it and navigate back to the browser you can see that indeed everything has shifted one column to the right and our first column has a width of two columns now this can also be done for rows but be aware that the height of your element needs to be full let's navigate back to visual studio code and right after our cool span 2 let's give a day you guessed it row span 2. let's save it let's go to brave you can see that it has indeed been shifted to the bottom as well but our first grid item has a height of 66 percent so the background color does not completely fit in here what we can do is to navigate back and let's say the height dash 24 is heist dash full save it navigate back and this is the output that we need this was it for this video where we went over the basics on how to use grid and tailwind if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button you

Channel: Code With Dary

Views: 8,986

Keywords: tailwind css, tailwind css tutorial, tailwind css crash course, how to use tailwind, tailwind ui, css tutorial, tailwind crash course, tailwinds css, tailwindcss tutorial, tailwind tutorial, tailwind tutorial 2021, tailwind tutorial css, how to use tailwind css, how to use tailwind css in html, tailwind 2, tailwind css 2.0 install, tailwind ui tutorial, tailwind 2.0, grid in tailwind, learn grid in tailwind, tailwind layout, tailwind css layout, tailwind grid vs flexbox

Id: SDnum2IdebU

Length: 10min 5sec (605 seconds)

Published: Mon Jun 14 2021