The Magic of CSS Grid AUTO-FIT vs AUTO-FILL
Vložit
- čas přidán 26. 02. 2020
- Visit linode.com/designcourse for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, I'm going to show you the junior developer way of handling a common layout pattern, and then the level 1000 xp master full stack developer way of handling the same pattern, using auto fit, auto-fill (and their differences), along with the CSS grid, repeat, minmax and more!
Codepen demo for this tutorial:
codepen.io/designcourse/pen/p...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - Jak na to + styl
Maybe you should auto-fit this youtube channel into your subscriptions list? :|
Already subscribed! 😃 Your videos are my favourite learning resource for coding, your tips are brilliant and very easy to understand. I am building my website from scratch with zero programming knowledge, and your videos helped me tremendously, while making me enjoying the process of learning. Thank you! 🙂
make more on grid please...
Hi Gary, could you please tell in the next CSS Grid Video, if you see a need for grid fallbacks for older browsers?
Actually, @ 3:02 you wrote grid-gap I but use gap bcoz my VSCode Says grid-gap is deprecated What Do You Think Reply With Tagging Me....
Just checked, this is now accepted in most browsers.
Btw, bit off Topic, If I may ask. Is there CSS Preprocessor that is now accepted in browsers, as in raw like using SASS on the spot?
For those wondering, the "grid-column" CSS property is shorthand for "grid-column-start" and "grid-column-end". He uses the keyword "auto" for "grid-column-start" meaning it doesn't contribute anything to the grid item's placement, indicating auto-placement and a default span of 1.
Late to the party but this video has helped me realize the power of Grid, and that it may actually be flexible enough to be better than flex for what I'm currently working on. Thank you!
I spent my whole night to solve the problem of auto-fit and you solved it in 1 minute. Changing auto-fit to auto-fill solved my problem.
A lot of thanks to you. You can imagine how i fill tired when you spent whole to solve a problem but you can't solve it till the morning. 🙏🏻🙏🏻♥️
funny, this is exactly what i need in my project right now, thank you so much.
Same here. I needed just this for my project to run perfectly well and after hours of tackling it decided to check youtube and Gary is the first solution I saw
@@dalemoayokunle7330 are you his friend?
My thanks to you sir, you always come with a right video at the right time, when I’m in need. Very cool, thx.
I usually only do backend at work but trying to become better at the front-end part. I’ve been struggling with these kind of things, thank you for this.
same here
wow thanks for the vid, I didn't know about such css properties. That's very cool
I love css grid. Your video appeared so I watched, enjoyed, learnt !
Liked and subbed.
This 2 year old video really helped me out. My flex ass is struggling on last row because of justify-content: space-between. this video is the solution if you want the last row to be justified left as well.
Thanks, today I'll try to rewrite my small project to use the grid system, seems sweet
I applied everything you said on the video today at my job and it solved everything that would have been so much more complicated hahaha THANK YOU SO MUCH!!!!!!I
Thanks for showing me these properties. Now I can change my resume to full-stack developer.
This is gold Gary! Thanks for teaching.
I highly appreciate your tutorial
This was awesome! Definitely gonna use it in a future project
All I can say is simply brilliant
The more I learn about CSS Grid, the more I realise this is what I've needed since day 1. This is awesome.
I’ve watched hours of videos and tNice tutorials one is the first that explains it in a way a complete beginner could understand! Great video
Your voice made this video informative and entertaining at the same time.
Thanks man, this really helpful!!
Man, you make great videos, thanks a lot!
Absolutely Awesome tutorial
as always, great video! This was very helpful!
That's exactly what I was looking for. Jackpot!
OH MY GOD OH MY GOD! You're a rockstar, SUBSCRIBED Thumbs up times a million
Fabulous Dude, Thanks for sharing this awesome concept, very helpful.
Thank you so much dude, it worked flawlessly!
thank you it hard to me to work without your CZcams channel
Man you're nothing but brilliant, absolutely brilliant!
Holy Moly :O MAAAAAAN, where have you been all this time??
Killed it Gary, Thanks these tips helped.
Wow great stuff man
Please do more UI/UX stuff. CZcams is lacking those types of videos
The best dude, I understand How grid works :)
Thanks man, you just saved me hours of typing media queries :D
I'd give you two likes if it were possible!
valuable information and top explanation thank you very much!!!!!
Thanks i have been very tried to fix my rows but no ia fix it by tour magic so thankssssss😍
Found this very useful, thanks!
This video is gold. Thanks
Great content man !
Great video! Very helpful.Thanks a lot!!!
I have never seen a video simplifies CSS Grid this good
Love this Gary ❤️
Thanks for sharing 😊
best explanation thank you!
Very useful and easy to understand explanation 👍❤
Thank you so much, this helped me understand!
Very well explained!! Thanks million!
wow it's awesome i like it i don't know that grid have a powerfull property auto-fit thank u sir
Excellent stuff, thanks !
This is amazing!!! Thank you so much
I don't knew this. Thanks 🙏
@00:15 thanks for calling me a junior nooby developer (you're giving me too much credit) 😂. Awesome video bro ✨
Thanks. Great time-saving future.
very good explanation video
Great tutorial, actually I saw another tutorial in your channel about gallery with such flexible grid display.
Very interesting tuto. What are the different sizes and units for mobile? Thanks a lot!!!
Will this work as an add on to whatever css styling you already have in your code? What is the proper scope to use this?
Useful video) I have remained question. How to combine auto-fit with grid proportions?
good video for a quick refresher c:
Thank you very very much,
What have been trying to understand since day one....
Now, I'm gonna build responsively like a Senior...😂
I appreciate once again.
great tutorial!
Useful video. Thanks
The hours I have wasted, Oh my God!
Same here
@@roydiga2669 well, grid's auto-fit is not supported on browsers that haven't been updated since 2020, so.. better use flexbox if you are making websites for clients (yes there are still people there who use PC's from 2008 without any updates)
This is very productive..Thanks
very awesome stuff, mr. boss
Do you save the document every time with CTRL+S? Noticed a few times that the document doesn't auto-update in your videos.
You need to enable auto-save it in the VSCode settings. I have it set to 2 seconds, I think.
this changed my life
You are amazing. Thanks
I've been looking for this all god-dam day! thank you so much "as a newbie to CSS is there a way to apply this to a WordPress theme
Thank you, bro🙂
Hey! Would you mind sharing a list of your extensions for VS Code? I can't seem to find a good intellisense thingy for html or css...
Thank you very much
great video, thank you very much!!!
great video!
Thanks. I'm less dependant on Bootstrap now.
I like how you dissect the web from the CSS POV perfectly
I don't speak English, but...
You save my life.....
is it okay now to use grid without the backup styling? I mean do most user use supported browser?
This is great, I just upgraded my skill in 5 minutes!
thank you
Amazing !!!
This is great 👍🏽
Very useful, thanks so much again!
Thanks 🙏
Its very useful
Is it acceptable to use grid and flex nowadays without considering older browser support?
Thank you!!! very usefull
aMAZING CONTENT!!!
How can I use aut-fit with two different sized columns? As in two different sized columns on desktop and automatically stacked on mobile all spanning the with of the screen.
Hey, what extension you use to compile sass?
Thanx a lot
This was perfect, thanks for showing the different ways of doing it! Exactly what I was going through
hi there i need help making my nav bar to go to the left and as a drop down, if the screen is not full screen
Very cool, Cheers!
Hey gary, please make these video for display=flex as well
I feel weird now that you mentioned @media being Jr dev..... butttt thank you for a great tutorial!!! Definitely going to use this from now on, always room FOr improvement
Media queries are perfectly fine. Just don't use it in place of the right tool. Being a junior dev is also fine, unless you are literally a senior dev. Then by all means, feel weird.
One thing you didn't take into account is that you might want the grids to show differently if you have multiple resolutions to take into account (mobile, tablet, desktop) etc. It's also more readable using ex. fractions than relying on minxmax etc.
It's good, but what if I need more padding for .quote element at two columns? With media queries there is more control over behavior... I think... ;-)
nice one