Thanks a lot for a detailed explanation and for a link that explains the difference between auto-fit and auto-fill. I think the hardest part for most seasoned CSS developer is to change mindset about how things should be layed out. Part of me is screaming: That can't be that easy, there should be so trickery involved, but a second half is trying to emrace the magic. So thank you a lot for supporting my second part :)
Ever since I found out layout land, I've loved her. She demonstrates so well with her fingers and those demonstrations look exactly how they are in real life. So easy-to-understand explanations. Thank you Jenny.
Totally awesome! There are those who know and know they know, and those who don't know and know not that they don't know. Jen, you are definitely in the first category. Super awesome explanation and demonstration. Wow!
I've been learning web development for a few months now, specifically html and css, and my biggest problem since the beginning has been figuring out the overall layout of the page. I've watched video after video on flexbox and grid, and although they've taught me some useful things, it wasn't enough to be able to just go ahead and do it myself. Kinda like learning to drive with or without an instructor.....you're fine with the instructor, but not without. Your videos have helped me manage that drive on my own without the instructor! Excellent tutorials, very well explained. Thank you for doing these, you have restored my faith in myself! Now I'm going to make myself a cuppa and watch some more :)
I love the way you convey your message. Your easy to understand and speak in a manner that makes sense i feel like your speaking directly to me great job thanks. I just subscribed to your channel
Used this in a demo this week - it's so amazing how easy it is with CSS Grid to show a card layout for all viewports without any media query. I guess my colleagues were slightly annoyed in the end for each "CSS Grid is AWESOME!" mention :D
Revisiting these excellent videos, Jen. Please update: The `auto-fit` shown at @4:21 doesn't have a comma, but it should, just like the code view @3:30 & @5:05 Thank you!
Super clear and complete explanation! Thank you Jen. By the way, in my opinion, the very "core" grid thigs only take 4 lines in your example - so elegant!
Brilliant and easy to understand. I would recommend you to keep the example code ON screen while you have your face too. It's sometimes hard to only hear your explanation if you cannot watch the code at the same time. But I am a fan now. Tons of videos to watch. Been away from Front-End development since 2014... dang.. back then I wrote my own grid systems, besides using Grid960 and I have also used bootstrapper. But .. those are dead now. That's for sure.
Just found your channel & have subscribed. Great tutorial. Still in disbelief that it could be so easy & powerful. I am a CSS newbie who just got started.
Happy to find this channel and content. It was strongly recommended. I enjoyed the explanations to various methods and clearing Floats. I stayed away from learning the details of using grid, but you explained the syntax beautifully. Subscribed...
small tip: if you're explalning a snippet, keep a copy of it overlayed when you switch to your talking head. easier to cognitivly connect what you're saying to what we're seeing.
There are number of issues remain - for *_different height_* items, there are "white spaces" since rows get defined by the tallest item in the fore-row, the preceding row. Masonry.JS may still be the only option if you want to place items in a *row* that are not of same size and dont want to see ugly white spaces. This, after 3 years of this video being published.
This is really good!! I'm having some trouble styling my as a grid, as it also has elements with inside that are clickable and have a title appear on hover (kind of the typical portfolio look). Do you have any useful links to look at for this case?
Is there a way to have a minmax for your number of columns? I only want a max of 4 columns(desktop) and a min of two columns(mobile). It seems like I still need a media query to specify I only want 2 columns on mobile but 4 columns on desktop. Right now I have: grid-template-columns: repeat(4, minmax(160px, 1fr)); then I use: grid-template-columns: repeat(2, minmax(160px, 1fr)); for mobile(using media queries) but it seems odd to repeat this whole line and use a media query when I just want to change the one value(number of columns). Any help is appreciated. Thanks
I currently have a problem with the "grid-gap". When applied It brakes the layout even used as very small % into fr-only grid 100vh, 100vw. Could you please give me an idea why it happens? Thank you.
You can always put a max-width on your container to keep it from growing too wide, sure. Or think about any of the possibilities you might want to have happen, and then use other CSS - another Grid, something in Flexbox, something with widths or flow or floats, or whatever - to accomplish that affect.
Is there a way to keep the number of columns equal across the rows? Say, if I had 4 images that fit in one row at the current screen width. When I narrowed the screen width, it throws the fourth image down into a new row. Is there a way to have 2 images to drop down instead so that it stays more balanced?
