As soon as I heard your thoughts about the proverbial "above the fold" concept, I raised my hands and said hallelujah! I get so tired of hearing that phrase because we don't in fact know where the "fold" is. Well, there is no fold like you said. Thank you so much for the video's and subscribed
@@parisqs i think this phrase explains it. Sometimes when you don't understand a concept completely, you tend to devise a mental phrase like that. You can also say "the initial visible viewport upon load"
Thank you, Jen. 🍀 This is a must see channel for all people learning CSS. I'm fascinated by the chance to have my pages being vertically responsive. Very cool.
With every video I advance my knowledge and see exactly where a given technology can help me in my current project. Thank you so much for this amazing content.
Great explaination Jen, thank you. I always used to hate when people told me that they need everything above the fold without the user scrolling. In my head I'm always like "sure let's just fit the entire site in the viewport" lol
For the h1 row, it appears that max-content, min-content and auto keywords all have the same effect. Because the content is a single element having fixed height (no min-height/max-height range). Great vid
Omg, just found your channel, you explain things really well. Now I understand CSS grid a little better. You got yourself a new subscriber.
6 лет назад+5
If I understand correctly, there is no difference between the `max-content` and `auto` values when applied to the row holding the heading element. There is only one item per row, and there are no `min-height` declarations, so `auto` is equivalent to `max-content`, and either can be used on the heading and navigation rows.
Yes, she and I have been presenting at a lot of conferences together, and over time we naturally started to lean on each other's work - she covers things from a more "geeky" or code-centric perspective, and I get at things from a more visual or design-centric angle. And together, we give a wide range of people all the parts needed to start to change how we do layouts on the web! There are also so many other amazing resources out there, especially on how to write the code for CSS Grid and Flexbox.
Awesomeness!! YOu and Rachel Andrews are great compliments to each other. YOur explanation of things makes them more comprehensible. Coding is becoming more fun and efficient.
Excellent information! As a follow-up, it may be worth talking about cross-browser compatibility (cough cough Internet Explorer) since that is also a big factor when using CSS grid. There is the use of "-ms" for some pseudo classes but not all are available.
Look for a quick video on Internet Explorer next week. And I'll be doing a 7-part series on how to write CSS that works in all browsers, old and new, sometime soon. I agree, it's important.
I’m trying to follow some of this to build a parallax effect using grid. I’ve gotten pretty close, but I can never guarantee that my middle row(of three)is the same size as the image div fixed behind it. Any suggestions from you or the people who watch?
hello - great video! is the codepen for this available anywhere? I have tried to replicate this great example - but I'm having difficulties and wanted to see what coding you have used. Thanks :)
Jen, first of all, THANK YOU! Second, I still didn't get what's the difference of using auto VS max-content. Could you (or anyone who reads this) explain what changes from one to the other?
I plan to make more videos about such things, yes. There’s much more to get into. For this example, in the block direction (rows), auto and max-content (and min-content) all do the same thing. It really didn’t matter which I used.
These videos are really great and I'm really enjoying using Firefox dev tools. It would be nice if when you hover the values in your grid-templates properties it would highlight the affected content in the window.
Thank you for your videos! I get it! FINALLY! Being from 'above the fold' printing industry, and working with customers who are stuck HTML 4 land of tables ... here's hoping I can bring them and myself up to 2019 RWD.
Is there any way to offset the image when viewing this in landscape on mobile? the image is hard up to the top of the viewport and if I wanted to add some top space, what would be the best approach? I tried adding padding to the image or margin top to the body, but they didn't quite work as expected.
is it popssible to make 2 column grid when height hits some curtain point, or height of particular row hits its min height (like the row with image in this example) with picture in the one column and headline with nav in the another without media query?
I’m not sure. These are the questions I love to ask and then try to figure out using code. Try it! You might discover a technique no one has used before. Write a blog post no matter what you find, and share it with us all. It’s early days. What _is_ possible? No one knows the answers yet.
Yes, the img height is set to 100%, with no width specified. I didn't write any code to define the column (because I only needed one column). Instead, yes, I defined several rows using `grid-template-rows: 3fr minmax(100px, 350px) max-content auto 1fr;`. Which means the image is in a row defined to be `minmax(100px, 350px)`, so the image is never shorter than 100px, and never taller than 350px. You can check it out for yourself at labs.jensimmons.com/2017/01-008C.html
Love your videos and explanations. I've learning CSS Grid for a little while now and it gets me excited about the present and future of web layouts. In this case, what's the difference between max-content and auto?
Great video! It'd be great to hear about differences between min-content, max-content & auto as column or row sizes, that part is a little confusing to me.
Thanks. I have more videos coming about all this, but in the meanwhile, Rachel Andrew just posted a video about content sizing keywords and what each does: gridbyexample.com/video/content-sizing/
6 лет назад
In this case, there is no difference between `max-content` and `auto` (the heading and navigation rows), I think. See my other comment.
You are a wonderful teacher. The only thing that I found unaesthetic was when the viewport was narrowed and the nav bar ran into two rows. If the two rows were centered and of equal number it would have looked better. Is that a possibility?
+Wendy Hoile, I was just playing around with Jen's example in the inspector. If you add a rule to the ".C ul" selector in her CSS, justify-content: center; then when each nav item starts to wrap, all the ones on the second line are centered. It's still not quite the effect you are looking for, because there's not an even distribution of items between the rows, but at least it's less jarring. I think this is a limitation of flexbox. I tried also playing around with the flex property on the individual items (flex-grow/flex-shrink/flex-basis), but I couldn't get much better results. My guess is you would need another grid just for the nav--I think that's what people mean when they say browsers need to implement "sub-grids". I'm not as strong in CSS as I'd like to be, which is why I'm really liking this channel.
web is a curse for people with ADD... it messes up your retention...unlike reflective medium... linear movement is so much better and allows one to "backtrack" your path...jumping form one thing to another in too many directions becomes uproductiive after a while...wish there was a "choice" instituted in the mode of browsing***
I feel like I'm back at uni, attending a lecture by the best professor on campus. Inspiring stuff!
Every video on this channel is quality material.
Weird. I had the same feeling.
finding this channel is the highlight of my day, excelent content.
As soon as I heard your thoughts about the proverbial "above the fold" concept, I raised my hands and said hallelujah! I get so tired of hearing that phrase because we don't in fact know where the "fold" is. Well, there is no fold like you said. Thank you so much for the video's and subscribed
Can we say "about the fold" is equivalent to "first screen without scrolling"?
@@parisqs i think this phrase explains it. Sometimes when you don't understand a concept completely, you tend to devise a mental phrase like that. You can also say "the initial visible viewport upon load"
This video deserves a million likes. Things will grow old, but this video will not.
Thank you, Jen. 🍀 This is a must see channel for all people learning CSS. I'm fascinated by the chance to have my pages being vertically responsive. Very cool.
With every video I advance my knowledge and see exactly where a given technology can help me in my current project. Thank you so much for this amazing content.
Great explaination Jen, thank you. I always used to hate when people told me that they need everything above the fold without the user scrolling. In my head I'm always like "sure let's just fit the entire site in the viewport" lol
so good... this content is so good. i watched every single video on the channel - and every single one is pure gold.. kudos to jen simmons 👍
You are brilliant in the way you explain these complex informations. I have new love for CSS Grids because of you. Thank you so much.
Jen explains everything in a very clear way. I am really enjoying this series of CSS Grid. Blew my mind, seriously. Keep the good work!
I really appreciate the demonstration with dev tools. Its always helpful to see how its broken down!
CSS Grid is just gold. I love it from day one of getting my hands dirty with it.
For the h1 row, it appears that max-content, min-content and auto keywords all have the same effect. Because the content is a single element having fixed height (no min-height/max-height range).
Great vid
Oh my I'm watching every single video you have post in a row! Love them all!
Omg, just found your channel, you explain things really well. Now I understand CSS grid a little better. You got yourself a new subscriber.
If I understand correctly, there is no difference between the `max-content` and `auto` values when applied to the row holding the heading element. There is only one item per row, and there are no `min-height` declarations, so `auto` is equivalent to `max-content`, and either can be used on the heading and navigation rows.
I love how complimentary to Rachel Andrews grid by example videos your series is! It’s a very logical addition, loving it :D
Yes, she and I have been presenting at a lot of conferences together, and over time we naturally started to lean on each other's work - she covers things from a more "geeky" or code-centric perspective, and I get at things from a more visual or design-centric angle. And together, we give a wide range of people all the parts needed to start to change how we do layouts on the web! There are also so many other amazing resources out there, especially on how to write the code for CSS Grid and Flexbox.
absolutely! A Wes Bos Course launched recently. Though to be honest, I am very happy that I was one of the rather early adopters of CSS Grid :P
Awesomeness!! YOu and Rachel Andrews are great compliments to each other. YOur explanation of things makes them more comprehensible. Coding is becoming more fun and efficient.
Awesome content! thanks Jen!
Excellent information! As a follow-up, it may be worth talking about cross-browser compatibility (cough cough Internet Explorer) since that is also a big factor when using CSS grid. There is the use of "-ms" for some pseudo classes but not all are available.
Look for a quick video on Internet Explorer next week. And I'll be doing a 7-part series on how to write CSS that works in all browsers, old and new, sometime soon. I agree, it's important.
Vertical resizing based on a "tier" structure looks like the future. This will probably make headlines.Literally!
This is really interesting. I'm facing the "bottom edge" problem in my job. Going to check out the css grid definitely and see how can it help me
Excellent presentation. Thank you, Jen.
i was hating front-end until i knew your channel. Thanks
Same like flex and flex1, 2 or 3....Havent did much of grid, but heard a lot...does it uses directions as well , like flex direction?
so dope. Thanks Jen!
you talking about css grid is awesome!
very thanks for all :)
Very cool demonstration.
Jeebus Cripes I needed this. Excellent video!
I’m trying to follow some of this to build a parallax effect using grid. I’ve gotten pretty close, but I can never guarantee that my middle row(of three)is the same size as the image div fixed behind it. Any suggestions from you or the people who watch?
hello - great video! is the codepen for this available anywhere? I have tried to replicate this great example - but I'm having difficulties and wanted to see what coding you have used. Thanks :)
Jen, first of all, THANK YOU! Second, I still didn't get what's the difference of using auto VS max-content. Could you (or anyone who reads this) explain what changes from one to the other?
I plan to make more videos about such things, yes. There’s much more to get into. For this example, in the block direction (rows), auto and max-content (and min-content) all do the same thing. It really didn’t matter which I used.
¡Excelente explicación, lo referente a "Fold"!
This is really enlightening. Thank you.
the way you talk and explain things wow !!! Professors should take notes on you.
Oh thank you! You know, I was a professor for three years.
These videos are really great and I'm really enjoying using Firefox dev tools. It would be nice if when you hover the values in your grid-templates properties it would highlight the affected content in the window.
in firefox dev tools i mean
Thank you for your videos! I get it! FINALLY! Being from 'above the fold' printing industry, and working with customers who are stuck HTML 4 land of tables ... here's hoping I can bring them and myself up to 2019 RWD.
Is there any way to offset the image when viewing this in landscape on mobile? the image is hard up to the top of the viewport and if I wanted to add some top space, what would be the best approach? I tried adding padding to the image or margin top to the body, but they didn't quite work as expected.
is it popssible to make 2 column grid when height hits some curtain point, or height of particular row hits its min height (like the row with image in this example) with picture in the one column and headline with nav in the another without media query?
I’m not sure. These are the questions I love to ask and then try to figure out using code. Try it! You might discover a technique no one has used before. Write a blog post no matter what you find, and share it with us all. It’s early days. What _is_ possible? No one knows the answers yet.
you are amazing.....thank you for making sense !!!!! EXCELLENT.
could you put a link in the description?????
Thank you for the video. Did you declare each grid-row for each element, and then did you declare the img height to be 100%?
Yes, the img height is set to 100%, with no width specified. I didn't write any code to define the column (because I only needed one column). Instead, yes, I defined several rows using `grid-template-rows: 3fr minmax(100px, 350px) max-content auto 1fr;`. Which means the image is in a row defined to be `minmax(100px, 350px)`, so the image is never shorter than 100px, and never taller than 350px.
You can check it out for yourself at labs.jensimmons.com/2017/01-008C.html
Love your videos and explanations. I've learning CSS Grid for a little while now and it gets me excited about the present and future of web layouts. In this case, what's the difference between max-content and auto?
Great video! It'd be great to hear about differences between min-content, max-content & auto as column or row sizes, that part is a little confusing to me.
Thanks. I have more videos coming about all this, but in the meanwhile, Rachel Andrew just posted a video about content sizing keywords and what each does: gridbyexample.com/video/content-sizing/
In this case, there is no difference between `max-content` and `auto` (the heading and navigation rows), I think. See my other comment.
You are a wonderful teacher. The only thing that I found unaesthetic was when the viewport was narrowed and the nav bar ran into two rows. If the two rows were centered and of equal number it would have looked better. Is that a possibility?
+Wendy Hoile, I was just playing around with Jen's example in the inspector. If you add a rule to the ".C ul" selector in her CSS,
justify-content: center;
then when each nav item starts to wrap, all the ones on the second line are centered. It's still not quite the effect you are looking for, because there's not an even distribution of items between the rows, but at least it's less jarring.
I think this is a limitation of flexbox. I tried also playing around with the flex property on the individual items (flex-grow/flex-shrink/flex-basis), but I couldn't get much better results.
My guess is you would need another grid just for the nav--I think that's what people mean when they say browsers need to implement "sub-grids".
I'm not as strong in CSS as I'd like to be, which is why I'm really liking this channel.
Excelent content. Like!
Thank you for this.
you're a visionary
Amazing!
Thank you. Where can we find this code example?
labs.jensimmons.com/2017/01-008.html
Jen Simmons: Thinking outside the box about inside the box.
Wow and thank you.
brilliant!
thank you ! very cool
Amazing stuff!
Great - Thank you!
thanks
esta mujer la tiene muy clara
This is gold !!!!!
Wow wow wow
Literally: 🤯
web is a curse for people with ADD... it messes up your retention...unlike reflective medium... linear movement is so much better and allows one to "backtrack" your path...jumping form one thing to another in too many directions becomes uproductiive after a while...wish there was a "choice" instituted in the mode of browsing***