The magic of auto-fit and auto-fill (and the difference between them)
Vložit
- čas přidán 11. 07. 2024
- Be one of the first to know when the course launches: kevinpowell.co/learn-responsive
Check out Scrimba: scrimba.com
One of the coolest things about CSS Grid is "repeat()" when setting up our grid-template-columns and grid-template-rows. While handy, giving them a set amount of columns can, sometimes, be a little too limiting.
Using the auto-fit and auto-fill keywords instead of a number, combined with minmax(), we can do some real magic.
#cssgrid
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
![srcset and sizes attributes - [ images on the web | part one ]](/img/tr.png)
Hello from TOP! Thanks for this video, it really helped me!
Came here from The Odin Project. Perfectly explained and understood. Thanks very much😊
Amazing explanation! Thank you, Kevin!!! I never had the chance to understand the diff between these two things.
Thx, was about to implement something crazy and this actually saved me from writting a ton of crazy media querries and javascript :)
Thanks for this information man. I'm new to your channel and web dev/ css, but looking forward to binge watching your videos! 😁
Thank you for clarifying the thing!
As usual, very clearly explained with great visual aid 👍
Awesome! Really looking forward to your course on Scrimba!
Scrimba is very cool :-)
I can't thank you enough sir, it ain't my thing leaving comments
But I have like two weeks following up with your videos and I've been applying them in my projects, for reals a big thanks to you
I thought I already understood CSS , but with you, it feels like there are a lot to learn and do with it
May you always have the heart of helping and pulling those who are down to get a comfort up
Big thanks ✨
This is brilliant and super simple. Thank you for this.
At Scrimba Per Herald Borgen was my favorite now even you will be added in my favorite list... Looking forward to your courses in Scrimba
Thank you for continuing to expand my knowledge of web development! Much appreciated, nice video :)
Really nice. Can't wait to take your course.
This is my go to channel now, thanks Kevin
Scrimba sounds incredible!
As a student new to programming, it sounds like something I would be very much interested in checking out. I will definitely be looking more into this. Thanks for the short lesson here, as always.
I was confused at first, but now I have a clear idea of how they are different. Thank you!!
Clear and concise, thank you
Great video! Thanks for your help!
wow, this was mad helpful, thank you!!
Thanks Kevin, as always awesome content.
really needed that, auto-fill and auto-fit was confusing to me. I'm still learning about css grid and loving it.
Yes, I did enjoy this lesson!!😃
I'm doing a React course on Scrimba and I already recommended it to a friend, I really liked the interface. Now I'm waiting for your course to recomend it to another friend who is starting on development, I'm sure it will be good!.
SUPER helpful, thanks!
thank you!!! You made it really clear!!!
I would to say your explanation is very clear and enjoyable .. THANK YOU AND KEEP GOING
👏👏👍
great explanation, straight to the point!
Brilliant! Thank you.
Thanks for this Video. Easy to understand.
Thanks a lot Kevin! Take care.
Your advice is amazingly appealing.
finally i got it...just subscribed ;-) thank you
It is a bit complicated and confusing, but actually it makes sense... especially the way you, Kevin, explained it! Well done!!
Awesome! It's so useful, thank you very much :)
Thank you!
Nice explanation!!!! Great !!!
bro, it's the first time I understand this ! I never knew that auto-fill actually creates the columns for that missing content. You're amazing !
Amazing! Thanks!
Thank you so much sir. Understood well from India
Thank you, now I got it
That's very powerful. I'll try to use this in my next project c:
great video :D
best explanation!!!!
Scrimba is stunning service.
very helpful :)
Nice video, I have learned something new. For now I was still using repeat(3, 1fr) or something like that and I used media queries. Or I would make that behavior with flexbox but it's nice to see this option as well. Thanks for this video.
I find myself using something like repeat(3, 1fr) more and more, and flexbox less and less. Flexbox comes in handy for a quick "display: flex; justify-content: space-between;" or something though, for say your logo + navigation or something like that.
I like your teaching
finally understood this
Now that is powerful stuff. This folding behaviour is essentially the problem that style frameworks were made to solve. Now its native and takes ONE LINE!
It still blows me away when I use it, hahah. It's so much fun.
Hi @kevin do you have a video that shows how to create responsive layouts combined with grid-auto-flow dense. Thank you.
One of my favourite _new_ CSS features. And one of those that I know the difference between keywords, but will never, ever remember which is which :p
Haha, totally. And then you end up somehow second guessing yourself every single time and always picking the wrong one :)
Jesus it was so good
Hi Kevin, channels like yours with so easy to understanding content are the true gold nuggets on youtube. In the last 15 years i learned so much most self-educated, I read hundreds of papers and documentations, played around with passion for new technologies and now i can sit relaxed back to enjoy videos like this. Myself was born in the end of the 1980s. If you like, I grew up together with the Internet and still experiment every day like a little boy with so much fun. I can recognize exactly the same in all your videos and you really love what you do. Dude, keep up the good work!
Best regards from the heart of Europe and cheers with a cold german-brewed beer, Patrick 🍻 😉🤘
pretty slick. Basically like using Flex-wrap with a min-width
Never thought of it that way, but yup :)
What a guy, that Kevin.
Anyone know the font Kevin is using in his text editor? Is very nice
3 minutes in and mind blown lol. Really nice feature! I did something similar with a few media queries and excited to replicate that project with this CSS style. How's the browser/mobile support for this. I'm going to do some research, but just in case I miss something I'd like to here everyone's input.
Awesome channel!
You remind me of Emergency Awesome but for web geeks.
I love Charlie from Emergency Awesome! You're right, he totally does.
so grid is just overall an enhanced version of flexbox? is there any scenario where flexbox is better than grid (other than a simpler syntax)?
auto--fill and minmax is cool but what when i want the minmax 500px and than on a small smarthphone the content goes out on the right site, because is 500px fix... what can I do to have a fluid with on the moblile too... without any media query?
this similar like flex-wrap & flex-grow in flexbox yeah
Hey Kevin love your videos. Do you think you can make a tutorial on how to make a masonry style grid system. Kinda what Pinterest uses.
Love your educational videos, keep it up! :)
Sadly JS is still the answer for that... I think anyway. I can't think of another solution off the top of my head. You could use columns (I have a video on it), but it doesn't keep all the newest content on the top row, but instead in the first column, which isn't great for that type of thing.
What if I wanted to have an upper limit to the amount of columns I had with bigger screen sizes.
Great video length! Not 19 min, just 8 min. :)
How much will the course cost?
Thanks Kevin. I don't understand why people use Bootstrap in 2019.. CSS Grid is so powerful and browser support is great.
Bootstrap is more than grid classes I think, you can leave them out by using SCSS. But no, grid browser support is not 100% there yet. Grid gap and IE11 gives problems for example, even with autoprefixer.
Who else is here from the odin project! 🙃
Awesome,, it's same as bootstrap grid system.
A lot more customizable and robust though :D
Actually, it's better than Bootstrap as you can have full control.
Wooow!!
Hello everyone, my question would be that if is there any way of that how when one of my items gets to the next row because cant fit in the first one, i want it to occupy 1fr of that row, so for example when 2 of the 6 items were pushed to the second row i want them to occupy half of the second row each. Sadly their width is equal to the those items width which ones are in the first row. Thanks for the help!
That's not possible with how grid works. You could do that with flexbox through, using flex-wrap and a flex-grow on the items 🙂
This is a really interesting. By the way, have you added any effect to your voice ??
No effects on my voice, why?
@@KevinPowell your voice sounds cool now. It just sound better. I dont know why..
With Gutenberg you can do columns and turn to HTML to style as well now
Gutenberg is pretty cool, but I wasn't super impressed with it. Maybe because of all the hype it got, but I was expecting a little more. The columns feature is a bit limited IMO
I think Gutenberg will get better and I am trying to use it more but I change it to html and then start styling instead of making my own custom blocks.
always awesome! no dislikes yet.
Is it a real CZcams video if there are no dislikes??? 😂
hahahaha
Odin Project gang !
i have little bit confusion
this is example,,,,
repeat(auto-fit,minmax(150px ,1fr)),so grid cell take first minimum space 150px and after then he take maximum space means 1fr its good but this examle
repeat(auto-fit,minmax(150px ,500px)),so grid cell take first maximum space i am very confuse ?????means if we are giving in fr
so he take minimum space before then and maximum is after than ,,,,,,,, but if we are giving in pixel,%,em,rem whatever so he take minimum space after and maximum space is before ??
That would work as well, it just means that they have a minimum size of 150px and a maximum of 500px, but depending on the situation, they may never reach their maximum, unless say you had three items, but 2000px of room, they would never be wider than 500px each.
Hi, I have a question. It's not important but this is bothering me. If I write:
grid-template-columns: 1fr 1fr 1fr;
it creates 3 columns as it should. But if I write:
grid-template-columns: repeat(auto-fill, 1fr);
or
grid-template-columns: repeat(auto-fill, 1fr 2fr);
or
grid-template-columns: repeat(auto-fill, 1fr) 30px ;
...any of these will render only 1 column. What am I not understanding? Shouldn't repeat(auto-fill, 1fr); give 1 fraction to all items?
That's making a single column of 1fr every time. I think what you're after is `grid-auto-flow: column; grid-auto-column: 1fr`. That means all the elements flow into columns, rather than rows by default, and that their size is 1fr, so it'll divide that space up equally.
If you use auto-fill, it needs set values, so like, repeat(auto-fill, 400px) or whatever. That, obviously, doesn't look good, but if you use it with a minmax(400px, 1fr) it helps solve that. This works because the items are allowed to be 400px wide, so if it can squeeze some in, it will, but if there is extra room left over, they're allowed to grow to fill that space, until another one can squeeze in.
@@KevinPowell thanks for the reply, it makes more sense but I'm still confused by this.
Why is it ignoring the other values? for example if I write:
grid-template-columns: 200px 200px 200px repeat(auto-fill, 1fr) 200px;
It completely ignores all the 200px columns and creates only 1 column. If the repeat function is invalid, it makes the whole declaration invalid?
this kind of stuff, makes me question bootstrap.. if i still use bootstrap or start doin this kind of stuff.
Personally I hate bootstrap. CSS is such a powerful language for making custom designs. Bootstrap locks you into using the same old, bog standard layouts and (generally static, unchangeable) utilities. Every site using bootstrap looks the same in most places. BS is also very verbose, hard to tweak and cluttered compared to using a css precompiler like scss. If you're doing lots of pages that all require many BS components it may be quick but its rarely pleasing to look at imo. Write your own set of styles in several scss files and copy them in and tweak per project as needed... saves you time but also a lot easier to customise than BS. You'll also learn a lot in the process of making your own templates.
where exactly can i get this css grid?
It's part of CSS, nothign to get :) - I have a series of videos on it if you're more interested.
1 dislike still floaters
where auto-fill would have been appropriate I had to use auto-fit with a max-width on the child to get better cross browser support. (edge)
Hii sir
Hi :D
Using grid in safari and opera. its like its end of the world
But grid is supported in both 🤔
It even is supported in IE11 if you're willing to put a bit of work into it.
I have so many tries to joined your community channel on discord but there is a problem
1rd comment!
I'm 5nd :)
3th :(
Designcourse stole this vid imo