Tailwind CSS Grid Layout with React - For Beginners

hey everyone and welcome back to daily tuition in this tutorial we are going to talk about self-wing grade system we will look at how we can use Kelvin CSS to build a descent and responsive design in the application so let's first talk about what is Delvin grid system as you all know the CSS grade layout modules offers agreed based layout system with rows and columns making it easier to design a web pages without having to use loads and positions each row can have multiple columns Intel in CSS to make a row you just need to specify grade class to the element and then you have to specify how many columns you want in the row so right now in this design we have two columns in this row Kelvin CSS use grade calls and class to create columns the asterisk here indicates the number of columns you can specify any number of columns here inside this row if you want two columns you can pass here to if you want four columns you can pass your four and so on so using this technique you can make your own grid layout in a Pity let's dive in in the Practical example I'm using react app to demonstrate Elven query system so I already initialize this application with Kelvin CSS and on the left side we have the television CSS documentation and right here I have the react application running on the localhost 3000 now I only have some styling to this react application inside this index.css file here I initialize the telephone CSS with this there's been directly then I added here a pond and specify that bond to all the elements then specify body and specify the background color to the body and then I select The Descendant div of the grade class and specify color text align Center font size and padding I'm going to specify all these properties to The Descendant depth of this greedy club now just for that I'm going back to the app.js right here and here I'm going to create a simple grid layout so to make a grid layout in kelvin CSS you just need to create a division tag and inside that you have grade items so here inside this div I'm going to specify a class we need to First initialize this div as grade container so to do that we specify here a class name so I'm simply going to say here last name and then we specify grade class name using this great class name we initialize this date as a greedy container and inside this create container we have grade items so let's create that grid items here so I'm going to say here the and then specify 0 1 here to indicate this is the first day then I'm going to duplicate this and specify here 0 3 and 0 Joe to indicate this is the first second and third year let me save the changes and we're going to have the result what I want but let me just add some background color to these leaves and add my styling to it now let me specify some background color so we can clearly see all these divisions so what I'm going to do is write down here I'm going to create a function to randomly specified color to this div so we create here get random color and then specify here a return statement and this written statement is going to return a random color from this function something like this and then I'm going to copy this get random color and then specify that to this first day so to specify that I'm simply going to space over here first style inside the style I'm going to specify object and then specify background color like this and then specify d get random color so I'm gonna first add a template string and inside that I'm going to call Dollar in the curly versus I'm going to specify the get random color function now this function is going to return the random color and specify that to the background color so you can see I'm going to have this background color to this division tag let me do the same for all this division tag let me copy this and then specify that to all this data something like this so this will specify random color to this division time now just after that now you don't have to focus on this get random color function so this class is going to initialize this tape as a great container what if you want to make two columns layout you want two columns in a single Row in that case you can add here a class called grid calls to now can you find out the small mistake inside the score why the styling of this index.css is not applied to this division tag the reason behind this is here I have a small n if I specify here a capital N Save the changes you can see I'm going to have all the classes to this division tag now in react these all are Json so you need to consider these attributes as properties so now you can see on the first row I have two columns and on the second row I have one column this is because this grid layout is going to create two column layout to make a four column layout you just have to change this column to 4. so this will add four column layout inside this gate you can see now because I don't have the fourth div here if I create the fourth div then that will create the fourth column you can notice now because I have this get random color background color to this division tag whenever I save the changes it will automatically change the color of this division tag this or that you can notice I don't have any gap between all these dates to add some gap between all these divs you can simply add here a gap class Gap one Gap one is going to specify 4 pixel space between this division tag when I say the changes you can see it will add some space between this there now let's make 12 column layout to understand this grid more easily so if I create here 12 columns something like this and you can see now I have 12 column layout and now if I want to put all these days in the single row I'm simply going to put here well this is because I have 12 division tag and I wanted to make 12 column grade system so I specify here call block so this will just put all the days in the single row you can notice now whenever I change this grid column if I space over here for Delvin will automatically move all the remaining columns on the next row you can notice I'm only going to have four columns on the single row and other columns on the next rows you can do the same with the row class as well so let's suppose that you want four rows inside this grid container You're simply going to say here grid rows 4. this is going to create four rows inside this grid system you can notice and now because I have more than four division tag inside this grade that is why I'm going to have the result something like this but now I can use here a class called grade low column to automatically arrange all these days inside the row let me save it you can see this will automatically arrange all these divs inside a row we have four rows and three columns now suppose I want only five column in a row using this grade flow call it will equally divide all this division tags and specify that to this work now let's suppose that I want five column interval in that case I'm simply going to say here grade calls or when I say the changes and now if I duplicate this div one more time you can see now this wave moves to the next row now once we understand now we can align all these grid items one by one in a row let's take a look at how you can add a different width to these grid columns now suppose I want to spawn this First Column keep in mind CSS grid lines starts at 1 not 0. so full width element in a 12 column grade would start at 1 and end at 13. so if you have 12 column grade layout it starts from this first Gap and end right here at the end of this 12 column so now let's suppose that you want to spawn this First Column till this third column I want to specify the width of the second and this third column to this First Column to do that I'm simply going to specify here a class name so I'm going to say here last name is equal to and then specify here call spawn 3. this indicates I want to specify three column width to this first day when I say the changes you can see it will take the width of 3 column and specify that to this First Column so this will take all three column space so correspond 1 indicates the default spanning calls Pawn 2 will take the width of the second column the call spawn 3 will take the space of three columns and so on just for that you can also use call start n and call and N utilities to make an element start or end at the nth grade line so now suppose you want to add empty space in the grid you can then use call start n to start the column from a specific column and add some space to the column let's suppose that you want to spawn this column and add a one column space to this First Column I want to add two column width to this First Column and start this column from the second column I want to specify empty space right here in that case I am going to first switch over here call spawn 2 so this will just take two column width to dispose div and then I want to start this column from the second column so I can simply specify here call start to so this will just start this First Column from the second column starting point and I say the changes you can see it will start the First Column from the second column starting point and it will add some space at the starting you can do the same with call n so let's suppose if I space over here Paul and it then you can notice this First Column star from the eighth number of column so if I get rid of this grade Rows 4 and if I add here 12 column layout to understand this call and 8 and if I increase the size then you can notice this First Column starts from the eight column you will understand this better if you specify this to the last division tag if I copy this and specify that to the last name and if I add here call and it and then let me get it off this on and specify here the default value 1 and then I'm gonna get rid of this call Spawn Two so now this call and add is going to start from the eighth column and add eight column space right here so if you count here one two three four five six seven and eight then you'll notice is 12 column starts from the eight column and it will start from behind not from the starting point this is just opposite of call start n this means if I specify here well save the changes you can notice this will add 12 column space and add this division tag at 13th column now you can do the same thing with row call utility class so let's suppose that you specify here row span 2 and if I space over here grid rows four then you can see the First Column is going to take the height of two columns if I increase this to 4 it will take the height of 4 rows and obviously you can use row start n and row and end utility class to add some space to this row so let's suppose that you specify row Spawn Two and you want to start this Row from the second row then you're simply going to say here row start 2 so this will just start this row of the second row you can see now we have the first column on the second row and Delvin is automatically align all these columns one by one we can also use grade flow utility class to control how Auto placement algorithm works for the grade layout to understand this class we need to add call spawn to the column let's suppose that you have three column grid layout so let's suppose that we have three columns grade layout something like this let me get rid of this class save these changes and now to the first div here let's suppose if I specify class name call Spawn Two and I'm gonna do the same if I specify here call spawn 2 to the second div as well then you can notice I'm going to have the result something like this I'm going to have here the empty space after this First Column this is because so if the width of the second column more than the size of the space then Kelvin will automatically move this second column on the next line to solve this problem you can simply use here a class called grade flow row dance class so this will automatically align all these items you can notice we have one then we have the third column then we have the second column and then we have the fourth column this will fill this empty space with the different column you can also use the auto feature of Delvin so let's suppose that you want to specify Auto columns to this grid you can simply specify here a class called Auto calls Auto you're going to have this result but if you specify here grade flow call data changes you can see domain will automatically align all your columns but Delvin health is auto class by default but you can also use Auto calls Max and auto call mean to specify minimum and maximum classes you specify here Max so this will specify the max width do all these grid items and if your specify here mean then this is going to specify the minimum width to all these grid items now let's talk about the important topic of grade which is responsive layout now let's suppose that you want to make this layout responsive for various devices if I get rid of all this right from here and now I want to make this layout completely responsive then I can use different breakpoint utility classes of Kelvin right inside this layout I want four columns for large device two columns for medium device and one column for small device for that I can use Delvin responsive utility classes when you open your inspect role of chrome then you will notice here you have different breakpoints here using these breakpoints we can change the layout of this gray system to understand this you have to first back to the Kelvin CSS documentation click on the get started and click on this screens here you can find different breakpoints of the Kelvin CSS screen in let me just explain this breakpoint this sm640 pixel means if the viewport is greater than 6 40 pixel then specify all the classes of this breakpoint to the element if the viewport is for medium size of devices means if it is equal to 768 pixel or greater than that then specify all the television classes to this medium size of devices to understand this breakpoint let me just show you a very simple example so I'm going to say here SM grade call 1. so this will specify one column to the small device when a status what a small device I have one column and now if I add here MD grade calls to and when I save the changes you can easily Define the difference if I increase this viewport you can see this will change the grade layout when the viewport is greater than 768 pixel I'm going to have two column layout this is because the break point of this MD is 768 pixel and if I want to specify all column layout to the large device I am simply going to say here LG grid calls or so for the large devices I want four columns I'm going to save the changes and when I increase this viewport and if the viewport is for large devices I'm going to have four column layout here so these breakpoints indicates the device's breakpoint and same for small devices MD for medium devices and LG for large devices so for the large device I want four columns so I'm going to say here LG grade columns 4 for the medium size of devices I want I want two columns only first place over here MD grade calls to and for the small device I want only one column so I'm going to see here SM delete column one you're not limited to use only these breakpoints inside your Telvin class you can easily customize it according to your need I have a complete Delvin CSS course on this channel you can find more about customizing Kelvin CSS there these classes will apply from minimum to the maximum width it means from the small devices starting from 640 pixel if the viewport is 640 pixel or greater than that I'm going to specify one column to the grid layout so it means if the viewport is greater than 640 pixel and less than 768 pixel I want one column when the viewport is less than 768 pixel I'm going to have one column here but if I increase the viewport and if it exceed 768 pixel I'm going to have two column layout here and if the viewport is less than 1024 pixel I'm going to have this two column layout inside this grid layout so if I increase this viewport I'm going to have two column layout but if the viewport is greater than 24 pixel I'm gonna change this layout to four columns you can note it you can create many beautiful and amazing designs with play system so I hope you understand how to work with great layout in terms CSS if you have any question you can comment me down if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one [Music] thank you [Music]

Channel: Daily Tuition

Views: 7,619

Keywords: Tailwind CSS Grid System - For Beginners, tailwind css grid system, how to create tailwind css grid, tailwind css grid, grid layout, working with tailwind css grid layout, how to make tailwind grid layout, make tailwind grid layout, make grid layout in tailwind css, tailwind css, grid, layout, tutorial, tailwind, talwind, responsive taiwind grid layout, tailwind responsive grid layout, for beginners, Tailwind CSS Grid Layout - For Beginners

Id: ERmtjRqWNcY

Length: 18min 53sec (1133 seconds)

Published: Tue Oct 18 2022