And it was at this moment I realized RUclips's recommendation algorithm has really out done itself this time and I found a treasure trove of knowledge. Thank you so much for the level of clarity and precision in communicating this information.
I learned the basics of grid and didn’t know what to do next. Someone recommended your channel to me and this was the first video I clicked on and wow 🤩 this is so cool. Thank you for this eye-opening content!
Just discovered this channel.. Have learned more in just a few short sessions than other channels are able to convey in hours. Thank you for your insights.
I initially watched this because my parents had a poster of one of his image when I was young. But now grid-auto-rows/-flow dense have solve one of my current design issues. Thanks!
I have never used CSS grid, only flexbox, but your videos are so captivating and taught so well, that I feel like I can use CSS grid immediately on my current project without the need to really practice to understand. I like your teaching style.
One of my first experiments with CSS in general was to recreate a mondrian painting, because I thought it would make a good challenge...glad to have found this channel, great explanations!
I'm just getting my feet wet with html/CSS and I'm already blown away by this community. I'm an ex musician turned commercial photographer and I've always been interested in web development. Hopefully one day I can implement my years of audio/visual expertise to this universe!
I am a designer learning about front end development and boy, this video is a master piece. I am going to do this and then recreate the painting in grid and put it on a wall in my living room. God this is so inspiring! Thank you so much!
Just discovered your channel. Usually am doing backend development, but this made such a huge impact on me, spent last few days building grids. Simply amazing, big thanks for this superb presentation. I'm sure there are many people inspired by this channel.
Hi Jen, I have only just come across your RUclips channel and love the way you explain Grid. The first time I started to use Grid was 3-4 years ago and the first exercise I did was to try to recreate a Mondrian painting! But a responsive Mondrian is brilliant. Thank you
Jen.. M'am you are the reason why I feel I should always remain creative and not take the road most travelled!!🤗 Glad to have a teacher like you 🥳🙇🙇♂️🙇♂️🙇♂️🙇♂️
This is perhaps one of 'the' most intelligent and erudite videos in this area that I've seen. It's certainly given me some interesting new directions to explore. Thank you.
what’s on the head of someone that gives thumbs-down to this invaluable content. Thanks for sharing your knowledge in such as clear and “practical” way. Brilliant
I like how you talk through your thought process. Back-end development makes sense to me. Design does not. Hearing your thought process is very helpful. Thank you.
Is there a performance or semantic reason you keep choosing UL for your recent layouts as opposed to section or div or you just somewhat arbitrarily chose it? #learning
That's a very good question - one we all should ask ourselves all the time. Is this the 'right' semantic markup. Perhaps I reach for out of habits from a content management system I used for many years that made lists of content into lists. Perhaps that is the best way to express this list of images, since it is a list. I tend to avoid s because they have no meaning, and I do want to provide meaning. If, say, this were a list of teasers for articles, followed by a separate kind of content, using a would give many people a quick way to skip past the end of the list to the next thing. Although perhaps a of s would be a good way to list teasers for articles. For this painting, it feels to me like a list of images, so that's what I used.
very cool. Love how you look through a completely different lens to me (I'm more into code, but now learning how to display things in a nice way). Love the Mondrian idea.
I love p.mondrians work and this was a brilliant intro to grid to show off grid responsiveness. I'm a visual person by nature so this sort of video is what I need to understand CSS. Thanks heaps...
You are amazing. I am completely enamored with grid. I find myself agreeing with you on many points as far as the current and future state of the web. Thank you for your insight and instruction.
Where's the link to your Image gallery you showed in the video? I have tried and tried but I can't get it to work with different size images. I want to disect your code.
Why do I get the vibe of Gina lenetti of Brooklyn99 from all your videos... Great content by the way .. and thanks for everything and please keep posting 😃.You are one my few motivation in my path of designing by coding through web !!!
Can you explain why it is that when the container in a "repeat(auto-fill, minmax(n-px, 1fr)) grid"; becomes smaller than the widest item in the grid, that it progressively breaks the rest of the layout?
Really Awesome... but do media queries have any disadvantage?. I mean, i am using combination of css grid and media queries i feel that is really powerfull and responsive, am i going wrong?, what's ur recommendations. "thanxx"
Hi, I'm enjoying your videos on grid. I've been using grid with media queries so I'm trying to incorporate your simple code to eliminate them. I found that the responsiveness of example with all the outdoor photos breaks down when the screen is below about 550px wide. Maybe worth another video? Thanks!
1st, love your videos! 2nd, HANG ON NOW! @05:00 you say there´s no media queries in the code... But when I look at your css (labs.jensimmons.com/2017/css/01-011.css) it´s absolutely STACKED with media queries. Please tell me what´s going on.
If I were building a component-based design system for a team, I’d consider such things. Nth-child would probably be a bad idea with a complex content system. But since it’s a one time demo, I wanted to keep the code simple, and the abstractions few. Plus it’s a good opportunity to practice using selectors. There are some amazing ones out there.
Damn! I can remember i did it with JS earlier and it was huge pain in a**. Thanks a lot to CSS grid and thanks to you as well for explanation! Welcome to 2018! :D
Question beside: Did you ask Piet Mondrian's community of heirs for the right to change Piet Mondrian painting. Thank's a lot for these layout samples!
I tried to duplicate this and my does not work and I followed all the steps in duplication. Mine does not work properly and I am wondering why. The only difference would be the class she has on body. Is everyone else working on this getting the desired results???
Web design was artistic but it got squashed by "flat design" and bootstrap clones. There was a time when web agencies competed in the realm of "artistic web design": 2A, Joshua Davis for Sony, Requiem for a Dream website, to name few. Hopefully, grid could put some artistic thinking back into peoples heads, because frameworks and similar tools took that away.
@@synchromatik Or rather people's comfort with the ease of those frameworks made it more difficult for them to justify continuing to push the envelope. It became a battle of cost + risk vs. analytics proving the simplest solution still yielded a great reward in terms of monetary gain and/or user retention. It's the age old question a lot of businesses try to avoid and sidestep - will a more creative experience make or cost us more money/users in the longrun and it's really made us a bit scared to experiment and explore. As an artist and engineer, I'm really excited to see where grid can take us. We deserve a continuous web experience that evolves and inspires. It's not just about the content anymore, the journey is just as important.
Jen, I had no idea that Layout Land became a yt channel until I got the "CSS Layout News - Issue 130" from Rachel, and I am subbed to www.layout.land mailing list. Are these two not the same project?
Yes, it's the one and the same. I have big plans for layout.land, but only limited time, so I focused on getting the videos out on RUclips first. The rest of the project will come later.
And it was at this moment I realized RUclips's recommendation algorithm has really out done itself this time and I found a treasure trove of knowledge. Thank you so much for the level of clarity and precision in communicating this information.
You are officially in my top 5 list of RUclipsrs. I love this!!!!
Gosh, the brilliance and creative freshness of your thinking is so rare and beautiful. Discovering your videos today made me glad to be alive. Thanks.
I'll have whatever it is that Ron's having, please. Cheers.
Jen, you have no idea how much I missed your content. Thank you for this channel.
I learned the basics of grid and didn’t know what to do next. Someone recommended your channel to me and this was the first video I clicked on and wow 🤩 this is so cool. Thank you for this eye-opening content!
Just discovered this channel.. Have learned more in just a few short sessions than other channels are able to convey in hours. Thank you for your insights.
I initially watched this because my parents had a poster of one of his image when I was young. But now grid-auto-rows/-flow dense have solve one of my current design issues. Thanks!
I have never used CSS grid, only flexbox, but your videos are so captivating and taught so well, that I feel like I can use CSS grid immediately on my current project without the need to really practice to understand. I like your teaching style.
This is my favorite video in your series so far.
Thanks Jay! And thank you for all your help in making these happen.
Brilliantly presented, clear and concise, great for photography layouts, thank you.
One of my first experiments with CSS in general was to recreate a mondrian painting, because I thought it would make a good challenge...glad to have found this channel, great explanations!
I'm just getting my feet wet with html/CSS and I'm already blown away by this community. I'm an ex musician turned commercial photographer and I've always been interested in web development. Hopefully one day I can implement my years of audio/visual expertise to this universe!
I am a designer learning about front end development and boy, this video is a master piece. I am going to do this and then recreate the painting in grid and put it on a wall in my living room. God this is so inspiring! Thank you so much!
Just discovered your channel. Usually am doing backend development, but this made such a huge impact on me, spent last few days building grids. Simply amazing, big thanks for this superb presentation. I'm sure there are many people inspired by this channel.
Hi Jen, I have only just come across your RUclips channel and love the way you explain Grid. The first time I started to use Grid was 3-4 years ago and the first exercise I did was to try to recreate a Mondrian painting! But a responsive Mondrian is brilliant. Thank you
Jen.. M'am you are the reason why I feel I should always remain creative and not take the road most travelled!!🤗 Glad to have a teacher like you 🥳🙇🙇♂️🙇♂️🙇♂️🙇♂️
This is amazing to me. I am a creative and web designer. You are renewing my interest in CSS and HTML.
This is perhaps one of 'the' most intelligent and erudite videos in this area that I've seen. It's certainly given me some interesting new directions to explore. Thank you.
I really like the painting analogy to bring everything in perspective
Really beautiful and simple....I hope you are back in the near future....
You are amazing! what a vision of an art-inspired layout
This is a very good video. I always wanted to make a layout like this but I couldn't before. Now I can! Thanks to Jen and CSS Grid!
what’s on the head of someone that gives thumbs-down to this invaluable content. Thanks for sharing your knowledge in such as clear and “practical” way. Brilliant
I like how you talk through your thought process. Back-end development makes sense to me. Design does not. Hearing your thought process is very helpful. Thank you.
Is there a performance or semantic reason you keep choosing UL for your recent layouts as opposed to section or div or you just somewhat arbitrarily chose it? #learning
That's a very good question - one we all should ask ourselves all the time. Is this the 'right' semantic markup. Perhaps I reach for out of habits from a content management system I used for many years that made lists of content into lists. Perhaps that is the best way to express this list of images, since it is a list. I tend to avoid s because they have no meaning, and I do want to provide meaning. If, say, this were a list of teasers for articles, followed by a separate kind of content, using a would give many people a quick way to skip past the end of the list to the next thing. Although perhaps a of s would be a good way to list teasers for articles. For this painting, it feels to me like a list of images, so that's what I used.
Thanks for your answer. It's also good to know that sometimes it's just a toe-mae-toe vs toe-mah-toe thing.
Funny, I just was about to ask the exact same question.
very cool. Love how you look through a completely different lens to me (I'm more into code, but now learning how to display things in a nice way). Love the Mondrian idea.
I love p.mondrians work and this was a brilliant intro to grid to show off grid responsiveness. I'm a visual person by nature so this sort of video is what I need to understand CSS. Thanks heaps...
Hi, I really enjoy your channel, thank you so much for all 🥰
I thought I already understand css grid, until I see your grid tutorial... Now I still got a lot to learn...
You are amazing. I am completely enamored with grid. I find myself agreeing with you on many points as far as the current and future state of the web. Thank you for your insight and instruction.
I miss your content so so much. :( Thank you! This was actually very helpful.
I love, love, love your videos. You're a great teacher, and I'm in love with your examples which dig into art. Quite inspirational. Thank you!
Experiments aren't impractical, they're the essence of learning!
Very interesting project. Thank you for sharing it!
Still amazing value video, thank you Jen.
Thank you very much for making video css grid layout.
Wow that clipped one looks amazing!
As well as a fantastic coder, you are an artist. Great channel.
Would have been very helpful if you would have put on a Piet Mondrian T-Shirt - but anyways thank's a lot for your detailed explanations on CSS Grid!
Practical ”impractical” magic! This, reminds me why I enjoy CSS so much :-)
Where's the link to your Image gallery you showed in the video?
I have tried and tried but I can't get it to work with different size images. I want to disect your code.
Why do I get the vibe of Gina lenetti of Brooklyn99 from all your videos... Great content by the way .. and thanks for everything and please keep posting 😃.You are one my few motivation in my path of designing by coding through web !!!
Can you explain why it is that when the container in a "repeat(auto-fill, minmax(n-px, 1fr)) grid"; becomes smaller than the widest item in the grid, that it progressively breaks the rest of the layout?
More gold! Thanks for doing this.
Real design. Wonderful video.
❤️❤️❤️❤️❤️❤️Thank You!❤️❤️❤️❤️❤️❤️I'm looking for this! I got stuck learning here.
Bravo! Well done... That was an absolute treat!
Really Awesome... but do media queries have any disadvantage?. I mean, i am using combination of css grid and media queries i feel that is really powerfull and responsive, am i going wrong?, what's ur recommendations. "thanxx"
Oh media queries are awesome. We should use them whenever we need them.
Hi, I'm enjoying your videos on grid. I've been using grid with media queries so I'm trying to incorporate your simple code to eliminate them. I found that the responsiveness of example with all the outdoor photos breaks down when the screen is below about 550px wide. Maybe worth another video? Thanks!
Wow such a helpful tutorial! What a great example
For anyone trying to build this, the magic is in the nth-child() property. You have to use it for each image!
Thank you for that!!! I was going crazy
Excellent explanation, good job!
1st, love your videos!
2nd, HANG ON NOW! @05:00 you say there´s no media queries in the code... But when I look at your css (labs.jensimmons.com/2017/css/01-011.css) it´s absolutely STACKED with media queries. Please tell me what´s going on.
It looks to me as if the individual images slightly distort before they change format. Is this avoidable?
Great! Thank you Jen!
Love it! You can recreate that painting with a couple lines of CSS, further proving that modern art is not worth shit.
Noyce. Thanks! Learned a LOT!
What's that lovely monospace font you use for your css code view?
but how the grid knows the row distribution? In which point the browser identify new row or add new columns
okay got it, it is grid-template-columns
Is there any reason not to use class naming like: wide, wider, high or ex-wider-higher for li instead of nth-child? Please anyone.
If I were building a component-based design system for a team, I’d consider such things. Nth-child would probably be a bad idea with a complex content system. But since it’s a one time demo, I wanted to keep the code simple, and the abstractions few. Plus it’s a good opportunity to practice using selectors. There are some amazing ones out there.
Great!
Outstanding content.
How do you make the individual images zoom in from their midpoint in the example?
Damn! I can remember i did it with JS earlier and it was huge pain in a**. Thanks a lot to CSS grid and thanks to you as well for explanation! Welcome to 2018! :D
Great tutorial. thanks a lot for that!
I guess that placement algorithm is quite complex that the browsers have to implement.
is this possible make with divs?
Yes
Question beside: Did you ask Piet Mondrian's community of heirs for the right to change Piet Mondrian painting. Thank's a lot for these layout samples!
No. It’s a clear case of fair use. But I would need their permission to make a t-shirt!!
Thank you for inspiring me to create outside of the conventional model!
I love you Jen! Amazing content!
4:32 THE BEAUTY 😍
Awesome tutorial +++++ thank you 🙂🙂
I tried to duplicate this and my does not work and I followed all the steps in duplication. Mine does not work properly and I am wondering why. The only difference would be the class she has on body. Is everyone else working on this getting the desired results???
I don't have the same result as the video. Mine have a lot of overflow images!
Wow, an eye opener !
This is genius and yeah learned and understand more about grid.
Great idea, that web design may be more artistic now
Web design was artistic but it got squashed by "flat design" and bootstrap clones. There was a time when web agencies competed in the realm of "artistic web design": 2A, Joshua Davis for Sony, Requiem for a Dream website, to name few. Hopefully, grid could put some artistic thinking back into peoples heads, because frameworks and similar tools took that away.
@@synchromatik Or rather people's comfort with the ease of those frameworks made it more difficult for them to justify continuing to push the envelope. It became a battle of cost + risk vs. analytics proving the simplest solution still yielded a great reward in terms of monetary gain and/or user retention. It's the age old question a lot of businesses try to avoid and sidestep - will a more creative experience make or cost us more money/users in the longrun and it's really made us a bit scared to experiment and explore. As an artist and engineer, I'm really excited to see where grid can take us. We deserve a continuous web experience that evolves and inspires. It's not just about the content anymore, the journey is just as important.
Jen, I had no idea that Layout Land became a yt channel until I got the "CSS Layout News - Issue 130" from Rachel, and I am subbed to www.layout.land mailing list. Are these two not the same project?
Yes, it's the one and the same. I have big plans for layout.land, but only limited time, so I focused on getting the videos out on RUclips first. The rest of the project will come later.
Thank you for the quick reply and for all the hard work that you put into making nice things for us. I am so pumped. Can't wait. Want more.
cool. will try
wow thank u for this amazing content,, you inspired me a lot!!
This is amazing!!!
buen video y buena explicacion felicitaciones!!! what your name??? iam Jans saludos desde Perú ..A love css3 grid
Cool :) I think this is super inspiring!
So good! thank you very much!
Wow... beautiful!
I love you! thanks for your videos
Mondrian Series E should be "Diamondrian" ;)
That's beautiful!
Mondrian conquered. Now onward to Escher 😉
This is simply brilliant! (Y)
OMG I LOVED THIS!!!
That was really cool!
I face a problem to do this example so if any one succeeded in this example i will be thankful if he share with me the code and thanks for helping
You can look at these examples here: labs.jensimmons.com/2017/01-011.html, use a web inspector (developer tools) and see what's happening.
Jendrian layout!
Great video
Thank you
That's Masonry.js! This effect was mostly done in JS back then. Now you can do it with CSS grid. NICE.
Art + Web design = I Subscribe
Love it!!
So Piet Mondriaan was ahead of his time, he was the CSS painter. 😃
Here i am studying Css Grid, if i had 10% of your knowledge abou it, ill be a GOD here 😋
your video is in high quality
whoa that is so cool :o