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

This video shows you how to create responsive grid layouts in Tailwind CSS without using breakpoints like sm: md: or anything. We’ll be using a plugin I created myself.

Tailwind Grid Auto Fit Plugin:

Demo Repository:

Subscribe and stay tuned for tips, tutorials and more.

#tailwind #tailwindcss #grid #cssgrid #gridautofit #responsive

[thefamousdjx]

Was lacking inspiration till i saw your tailwind css book. Your teaching style is unmatched, , went through half the content in a day and I feel super confident of my skills. Now everytime i see a design or picture, i immediately know how to bring it to life. Thanks

[shaileshkumarsingh]

This is really good, so far the best that i have seen, will really love another complex tutorial using this plugin of your's mam, please

[SergejTihonov]

Thank you very much for this video and especially the detailed explanation of the concept that you user inside the plugin. I learned a ton of css tricks from your book and this plugin and video is an awesome addition to that. Looking forward to the next small chunk of css knowledge to learn from you.

[ahmedmusawir]

This is THE BEST tutorial on the topic in the whole wide world ... maybe even in the universe!! Wow!!

[codernerd]

Just want to say that I love your tailwind videos and your tailwind book, hope you will write another one day, one of my huge pain points with Tailwind is forms, I know about the plugin but it makes the form field not really look all that great. This Plugin is amazing!

[mathis-meth]

Ma'am you are a huge inspiration. Any school who has you as its teacher will have kids grow their love for web-development that's for sure. We need teachers like you who make learning fun and intuitive.

I have one request ma'am. Just like you make videos about css, can you make some for Javascript? I read your blog post on snap-scroll to make carousel. Loved it!

[brijeshprasaddas]

I am loving this already...really so helpful

[talkathiriify]

Excellent
I love the way you explain and simplify things.
Thank you very much fir sharing.

[chinmaykumar]

grid-cols-[repeat(auto-fill, minmax(250px, _1fr))]

[chriscsmoon]

Great time saver. I love it! Thank you so much for sharing this.

[wayneswildworld]

Just used this plugin... AMAZING +1 SUB

[abhishekwebdeveloper]

Awesome! Thank you so much for this video.

[nicenaija]

Or do this


module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'fluid': 'repeat(auto-fit, minmax(20rem, 1fr))',
}
}
}
}


You could then use the class grid-cols-fluid.

[owaisulhaq]

your plugin is not working for me. I am facing a lot of issues in making my website responsive. Kindly guide me. I would be really thankful to you.

[input]

Hello mam, can you make a video how to make plugin and publish github please mam.

[adityarevankar]

Im not able to use this in my react project.

[anuj]

How to put column width with responsive in grid?