Easy Responsive Grid Layouts in Tailwind CSS without Breakpoints | Single utility class

hi everyone in this video i'll show you how to create responsive grid layouts like these in tailwind css without using any breakpoints like sm md excel lg any of that using a single utility class with a plug-in that i created myself i'll first show you how we would normally do something like this in tailwind css then show you how to use the plugin to make it much simpler and finally i'll talk about what exactly the plugin is doing behind the scenes and explain the css concept it uses ready let's go firstly without grid this is what it will look like because this is a not the normal flow in css i have not used grid to start with this is the tailwind css project uh the left side the file structure might look a little complex to you because i'm using 11t along with tailwind css only for simplification of this demo you can use tailwind css along with your favorite framework or simply plain html as well but uh you cannot use the cdn if you want to follow this because we are installing a plugin and that doesn't work with cdn you will have to install it either using cli or post css now this file has the first section that you're seeing right here and this file has the second section it's because of this i'm using 11p so you can separate sections into different files and keep them more organized all right if you want to know how to use tailwind css and how to use eleventy if you're new to it here's the tutorial i've created recently you can watch that all right now let's start with our first example here you can see we have about four items and quite small ones so what i would do is i would use the grid utility class along with grid calls one because following the mobile first approach i want only one column for the mobile size and on slightly bigger screens i would want two columns so i'll say grid calls to because we want equal width columns that's what grid calls to does it creates two equal columns and then on a medium screen size i would go for grid calls three and finally grid calls for i want to create four equal columns let's see what this gives us i also need a gap of about 2 ram so gap 8. great so yes this does give us one column on the mobile screen and slightly larger screen like a tablet or a landscape layout of mobile you get two columns and then you get three columns and finally you get four columns yeah you can skip the three column one in the medium screen if you don't want and let's do the same with the second example as well grid same thing we want one column grid calls one and then on sm grid calls 2 and maybe i'll skip the md i'll directly go to lg and say grid calls 3 because this is these are slightly bigger items it'll be too cramped if i add grid calls 3 at md breakpoint of course we need a gap as well gap 8. so this is what we have and that's what we need as well so as you saw we'll have to determine at what break points what width will really suit that particular use case and then accordingly change it so tomorrow if you want to change the width of this you might have to again check for sm breakpoint lg breakpoint does it really look good or do you have to change it and let's say in the first section let's say you add another item here something like you know just quickly adding another step here another number and let's say you have this item but here you have only four columns maybe this is not desired it looks uh quite wide and you think okay let's change it to grid calls five and here you might to say grid calls for so you're seeing how many tweaks we'll have to make right yeah and you might not be satisfied with this either that's why we will be using a plugin that i created for this very purpose that you don't have to add any of this right now right so let's see how to install the plugin and replace all of this with a single utility glass the first thing you need to do for that is install the plugin so open a new command and open a new terminal tab and say npm install dash d i'm going to install this also as a dev dependency and the package is here npm package is shruti valesa slash tailwind grid auto fit hit enter this might take a while to install and once that's done you can just verify in the package.json file if it's really installed and yes it is installed version 1.0 that's what it is at the moment and now this won't be sufficient you'll have to include this plugin in the tailwind config file which is usually your tailwind.config.js in the root of your project and here along with the other plugins that you might have you'll have to include this require you can see the autocomplete this is the plugin and once you have this you're set let me close these two and now you can simply remove all of this let's just verify that it's removed yeah so it's gone now and now i would want a responsive grid so i'll say grid auto fit that's the utility class so when you type grid out of it you'll see you are automatically being suggested these three utility classes related to the plug-in this is not there without the plug-in you can you can verify there is no uh grid auto-fit utility class entailment css this is because of the plug-in you can directly use grid auto-fit and see what happens right refresh yeah so now i didn't use any uh break points right like sm i didn't use any of those variance responsive variants but we still can see different number of columns based on the screen size i'll explain how that happens later but for my use case for this particular example i feel this item size is too large i can use grid autofit sm or grid autofit xs i think xs suits best here and what we have immediately is this i think this is perfect for the first example so you can see it automatically fits in as many items it can based on the size xs sm md and so on shall we do the same for second example first remove all these utility classes a grid is important you cannot skip that that's a display grid you will have to use that utility class along with that here let's try grid auto fit um maybe again just grid autofit which is also the same as grid autofit md both are same and let's see refresh yeah i think this is good except uh quite small so we can change that to grid autofit lg all right yeah this is perfect so based on how small or large you need one i one grid item to be you can choose from the available sizes that are there the documentation for this plugin can be found in this github repository which i will link in the description of the video so you can see you can just follow the same process that i just showed you it's right here and you can see what sizes each item is now let's say none of these work for you like you know maybe 14 ram we just used 12 ram for our first example and 18 ram for the second example let's say none of this works for you you want something in between or you want something uh maybe too small like say 10 rep right let's see how to do that you can use the arbitrary values here so instead of xs just add your own value like say 10 ram okay let's see what this gives us on large screen size this is what it'll naturally look like you can see that on smaller screen sizes you can see this would probably be around 10 m now because that's the 10 ram yeah you see uh it's about 160 pixels which is 10 rim so if you have very small items or if you want some custom width for some reason you can add your custom width here otherwise i'll change it back to what it was it was xs that's it uh this is how you use the plugin but continue to watch the video if you want to see what exactly is the plugin doing how does this work what is uh the css rule that it's using and so on let's look at a code pen demo we'll do this with prcss because we want to understand the css concept behind it right we have was we have a container and we have about five items here you can see and now to the container let me first add display grid this is what your tailwind utility class grid does and normally to create equal sized columns this is what tailwind does behind the scenes like when you add grid calls one two three this is what it's doing grid template columns repeat so let's say we need three columns you'll repeat it thrice and what are you going to repeat uh this particular value min max 0 1 fr so this is actually what's happening in tailwind css when you use grid calls 3. let's add a gap of maybe 2 ram just to understand it better great so no matter what you'll have three columns now right but what we want is we want to restrict the width now it's getting as small as this now we don't want that if you want to restrict the width you will use min max let's say 12 rem okay and the moment you do that you'll see a horizontal scroll bar it's not going to flow automatically because we are saying we need three columns and we need the minimum width to be 12 we want all of them to occupy the same width that's what one fr does one fraction each so since you've specified 12 ram it's not going to go below 12 rem but it will expand suppose the screen width is more it will expand what we want is even if if it's not fitting in we want it to go into the next line something like what flex wrap does in flex for that we have a keyword called auto fit this is in css you can simply use auto fit instead of a particular number and then this is not fixed the number of columns is not fixed you'll get as many columns based on this width here you see this is exactly what's happening with the plugin this is not there in uh tailwind like i said so i created a plugin using this very concept and when i say uh grid autofit access this is exactly the line that you're seeing here repeat autofit when max 12 rem and the moment we use sm you can see that this becomes 14 ram and so on until xl where this value is 20 ram so now that you also know the concept behind this you know it's not magic or it's not doing something uh very different it's using the same grid template columns property just that we're using autofit and we're using a fixed size here to make this happen all right i hope you enjoyed this i hope you learned how it's done in dalvin css and the css concept behind this particular demo that i just showed you yeah this is also um in on github you can find that repository i will link this as well if you want to try it out on your own this is how you do it you just install it and uh execute run npm dev even if you don't know how 11t works it's okay this demo will still open up in your browser you can watch that you can make changes or you can try out your plugin in your own project 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 thyris

Channel: Thirus

Views: 19,413

Keywords: tailwind css, responsive layout, responsive grid layout, grid in tailwind css, tailwind css grid layout, tailwind css grid auto fit, tailwind css grid wrap, grid layout in tailwind css, responsive layout in tailwind css, grid auto fit plugin, grid auto fit utility class, tailwind css plugins, easy responsive layout, easy grid layout, tailwind css tutorial, shruti balasa, shruti balasa tailwind css

Id: 9aQ6nFMsbDs

Length: 14min 40sec (880 seconds)

Published: Mon Jul 25 2022