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?
I can’t imagine anyone explaining these concepts any better. She’s a rockstar!
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.
Awesome explainer! Can't wait to see what you have in store for this channel. Thank you, Jen.
CSS grid is the bees knees! Really like the good explanation of explicit and implicit.
This is such a flexible and satisfying solution for an extremely common use-case. I for one welcome our new grid overlords..
OMG NO MEDIA QUERRIES!!!! JEN YOU ARE AMAZING!!!! THANK YOU SOOOO MUUUUCHHHH!!!!
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 :)
This is in incredible!!!! This is leaps and bounds beyond any other CSS explanations/tutorials on youtube. Thank you.
where have you been all my css life? THANK YOU!
this is so much easier after she explains all the complicated CSS in a very simple way
Hello, I am from Iran and I am really grateful for your great help, there are very few Persian sources in Iran and I am very excited to thank you.
This is the best front end explanation channel I have come across...Thank you for the content!!!!
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
Wow! Blown away by grid and your easy-to-understand explanations. THANK YOU!
Just love you explain this in a simple way. Thank you for this
I haven't found anybody else who explains it as well as you do. Thank you, Jen!
Thank you, Jen. Very good and clearly explained content.
Thank you! It took a while to wrap my head around grid, and your concise explanation helps a lot.
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!
clear voice and talking and awesome explainer ,thanks
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.
You are a great teacher, thank you for posting these videos bout CSS Grid!
Thank you for your kind words.
Best channel I've seen on layouts so far
Your teaching style is amazing!
great job!!
Outstanding Communicator, Love you man!
Jen, thank you so much for this brief, but informative video. I'm excited to get started on a family photo album using CSS Grid!
Very impressive!! You make it easy the way you explain it. Thank you!
Hi Jen. Many thanks for this post! I like how you explain the things. O course I have subscribed. And now up to the next video. Well done! 👍
Thank you Jen! Finally no media queries!
We'll still use media queries, for sure. We just don't need them as much. Not for layouts like this one.
Awesome content. Please continue to share.
Wow, great video! Awesome explaination and visualisation. I really look forward to more
Thanks Jen Simmons for this great Explanation , we want more Tut bout Css and Layout
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.
nicely explaination ... i was struggling from many days.
Great explanation of Grid's flexibility using implicit layouts!
Excellent explanation, good job!
This series is great.
i'm starting to love grid..greetings from Mexico.
Just used this to do CSS Grid on a page for the first time. Love it!
Amazing job. You've touched every piece of what matters.
Amazing way of explaining. Thank you!
I love this, thank you. I implemented this just now and it works perfect. Grid is so awesome for somebody who started HTML with table layouts.
Bravo! CSS grid made simple, thank you.
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...
Great explanation. Looking forward to more videos.
Very well presented and extremely useful. I was working out best solutions for an image gallery and this looks like a perfect foundation. Thank you!
Thank you for making my life easier!
Thanks for this awesome video. You make it simple to remember how that special 1 line of code works :D
Good stuff, as always. This is really good at describing how to code common layouts in very lines of CSS.
Thank you so much. Css grid from now.
This was really good. Thank you, Jen.
That's wonderful! Thank you so much, Jen!
Thank you for the explanation
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.
Great teacher, thankyou
This is great- so simple, and very well explained. Thank you :)
Queen of css
I love your videos.
Thank you very much for sharing your knowledge and expertise 👏🏼
Top Class! Fantastic!
Awesome Jen, thank you.
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.
The best **, the difference from people who just do a tut vs a reall explanation, why and how ****
@@jkovert wow you're a fucking idiot
@@jkovert get help.
@@damislav Jen coined the phrase "Fail Whale," her sole contribution to the field.
Thanks, Jen, very cool!
Really well explained, thanks
🔥This is awesome! Thank you Jen!
You are welcome!
Thank you Jen!
This is soo dope!
How would you do this filling by column (not row) when n-items is unknown?
Go Jen!
This is incredibly helpful
Great video, thank you!
Thank you so much
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?
This is awesome
Excellent - thanks! (Repeat 10 fr)
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
Gr8 explanation! Thx.
Looking forward to more videos.
Really helpful
Great video. Thanks
Me encantó!!
Hi I'm new to front-end stuff, this is the bootstrap default behaviour too when comes to this , right?
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 have a very pleasant voice. Nice video. Grids are great!
Question: what about high resolution screen (4K)? Just define a max-width on the to prevent unlimited columns?
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.
If there were two images both 200px in width and you open the browser to 590px, do the images stretch bigger than 200px, so they would both be 295px?
Dang, this is wizardry!
thats exactly what I want to code and execute back in 2014 holly molly
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?
I'm in love.
It's unfortunate that you stopped posting videos :(
Can this be used to design a whole page layout or is it just for a picture gallery?
Question, what about browsers that dont support CSS grid? Going to have to write the code for them anyway, right? (I'm new to all this)
please come back...
Otherwise, awesome videos.