The problem with using 'columns' is that the content order is column-first, so the user needs to read *down* the screen, then scroll back to the top for the next column, etc. Masonry is row-first, so the content order is across the screen first, which is not possible with 'columns'.
The problem with creating a masonry layout using columns is that columns fill a column at a time, so instead of getting the first items all above the fold, you have the first items in the first column, and the top of subsequent column are things well down the list. For some uses, that's not a problem, for others, it is. CSS columns also get weird if you're doing vertical infinite scrolling.
Thanks for your question, Karim! 🙂 Others already covered it perfectly-columns aren't a good enough solution, as content needs to flow row-first. Additionally, with masonry, you'll be able to set up the container on a cross-axis for a horizontal layout. 🙂
@@CSSWeekly I fear that Blink and Gecko have too many other priorities right now and it will be one of those things like user-valid/invalid where Moz had support for nearly a decade before the others got on board. But I sincerely hope you’re right and it’s quicker than I think!
You might be right. Perhaps if we create a ton of content on `switch,` Blink and Gecko will be forced to implement it so that it doesn't look like Safari is ahead of them. 🙂
I like your channel! 👍👍👍👍👍 You give a lot of information, and the information is up to date! As for me, as a beginner, it's very helpful! Thank you very much 🎉
That's an interesting point, Delanyo! The grid usage will surely go up if it includes masonry, but I don't think a standalone masonry can overtake the grid. Masonry is a very specific use case. 🙂
The more people who don't want to use grids, the more money I make because using grids and subgrids gives huge opportunities in creating adaptive design.
@@CSSWeekly I already hear from many people even with 10 years of experience that CSS is becoming more difficult to understand with its has and nesting. And this is just the beginning, and now they will start using @property @scope @layer @container query/style en masse. I don't know what will happen to these people. Personally, I follow all the innovations in CSS because I am a supporter of CSS First!
I wholeheartedly agree with the CSS-first approach! 💯 The new features you mentioned are far from one property you can start using today. The language is evolving, and we can either evolve with it or get left behind. 🙂
@@CSSWeekly CSS-first FTW! Yes, the language is evolving (and I'm following it since about 22 years ago) but, at the same time, as much as I'd love to remain a specialist, industry is only opening more and more full-stack jobs… And I can only feel for front-end quality, in general… 😔
great video. but pls stop with the childish "leave a thumb emoji challenge"; we're not 6 years old and you should have more respect for us and yourself. quality content - which yours is - will get you followers and engagement, but following what the flock of youtube sheep do is just a race to the bottom of the self-respect barrel and we all know you can use YT analytics to see the analytics...
Thanks so much for your thoughtful and constructive reply and the compliment. I really appreciate it. 🙏 I usually have a bit more meaningful questions, but engagement is not that high, and I wanted to see if people respond better to easier questions. (They do. 🙂) From my understanding, watch time is the metric RUclips cares about, so I didn't think this would result in more views/subscribers. (It didn't. 🙂) And to be honest, it did feel good to see people adding those silly emojis-somehow, it feels more human than retention and average view duration graphs. But all that being said, I agree with you and I'll make more effort to ask meaningful questions. 🙂
We can currently create a masonary layout using the columns CSS property. Does the new masonry display offer us more control? Is it really needed?
The problem with using 'columns' is that the content order is column-first, so the user needs to read *down* the screen, then scroll back to the top for the next column, etc. Masonry is row-first, so the content order is across the screen first, which is not possible with 'columns'.
The problem with creating a masonry layout using columns is that columns fill a column at a time, so instead of getting the first items all above the fold, you have the first items in the first column, and the top of subsequent column are things well down the list. For some uses, that's not a problem, for others, it is. CSS columns also get weird if you're doing vertical infinite scrolling.
Thanks for your question, Karim! 🙂
Others already covered it perfectly-columns aren't a good enough solution, as content needs to flow row-first. Additionally, with masonry, you'll be able to set up the container on a cross-axis for a horizontal layout. 🙂
Yea, thanks everyone! It's just I rarely needed masonary so I didn't really think about how the content flows would be an issue.
Great tips and resources Zoran. Thanks
Thanks for the kind words and your continuous support, Lucian! 🙏
👍Zoran, your work keeps getting better and better.
Thank you so, so much, Robert! This means a lot! 🙏
Im keeping my eye on the `switch` attribute for toggle elements . Probably will be years though
I'd love that too. Safari TP already supports it, so hopefully it won't be years. 🙂
@@CSSWeekly I fear that Blink and Gecko have too many other priorities right now and it will be one of those things like user-valid/invalid where Moz had support for nearly a decade before the others got on board.
But I sincerely hope you’re right and it’s quicker than I think!
You might be right. Perhaps if we create a ton of content on `switch,` Blink and Gecko will be forced to implement it so that it doesn't look like Safari is ahead of them. 🙂
@@CSSWeekly I'm in!!! #switchAttrInvasion2024 !!! 😆😆😆
Excellent, as always. Thumbs-up-emoji :)
Thanks so much, my friend! 🙂
I like your channel! 👍👍👍👍👍
You give a lot of information, and the information is up to date! As for me, as a beginner, it's very helpful! Thank you very much 🎉
Thank you for your kind and thoughtful words, Olena! This means a ton! 🙏🙏🙏
👍👍
Thaks a lot, José! 🙏🙏
Awww well of course I got to the end of this! Thank you so much for your support! And great video! Very useful info 👍👍 👍 👍 👍 👍
Thank *you* Ben, and please keep up the inspiring work! 🙂
I think if masonry is coupled to grid, the usage of grid might go up.
But if masonry stands alone, it might overtake grid's usage. 👍
That's an interesting point, Delanyo! The grid usage will surely go up if it includes masonry, but I don't think a standalone masonry can overtake the grid. Masonry is a very specific use case. 🙂
Although the masonry layout looks great, it gives me a headache when I look at it, probably because of my tired eyes.
CSS gone crazy.
Thanks Zoran!
Get some sleep, my friend! 🙂
But yes, it can get complicated. As always, thanks for watching and commenting, Ahmad! 🙏
@@CSSWeekly I think I really need to get some sleep🤔
You and me both, brother. 🙂
👍🏿👍🏿👍🏾👍🏾👍🏽👍🏽👍🏼👍🏼👍🏻👍🏻👍👍
Thanks so much, Daniel! 🙏🙏
The more people who don't want to use grids, the more money I make because using grids and subgrids gives huge opportunities in creating adaptive design.
Good point! Perhaps we should overcomplicate all new features so people can finally start taking CSS seriously. 😆
@@CSSWeekly I already hear from many people even with 10 years of experience that CSS is becoming more difficult to understand with its has and nesting. And this is just the beginning, and now they will start using @property @scope @layer @container query/style en masse. I don't know what will happen to these people.
Personally, I follow all the innovations in CSS because I am a supporter of CSS First!
I wholeheartedly agree with the CSS-first approach! 💯
The new features you mentioned are far from one property you can start using today. The language is evolving, and we can either evolve with it or get left behind. 🙂
Excellent point 😂
@@CSSWeekly CSS-first FTW!
Yes, the language is evolving (and I'm following it since about 22 years ago) but, at the same time, as much as I'd love to remain a specialist, industry is only opening more and more full-stack jobs… And I can only feel for front-end quality, in general… 😔
👍
Thanks, Tony! 🙏
👍 as always
(Sorry my first comment was with the wrong account haha)
I thought this might be your second account, as the Raccoon was familiar. 🙂
Very cool to see that you're into Rubik's Cube! 🙂
👍🏻
Thanks so much, Matheus! 🙏
great video. but pls stop with the childish "leave a thumb emoji challenge"; we're not 6 years old and you should have more respect for us and yourself. quality content - which yours is - will get you followers and engagement, but following what the flock of youtube sheep do is just a race to the bottom of the self-respect barrel and we all know you can use YT analytics to see the analytics...
Thanks so much for your thoughtful and constructive reply and the compliment. I really appreciate it. 🙏
I usually have a bit more meaningful questions, but engagement is not that high, and I wanted to see if people respond better to easier questions. (They do. 🙂)
From my understanding, watch time is the metric RUclips cares about, so I didn't think this would result in more views/subscribers. (It didn't. 🙂)
And to be honest, it did feel good to see people adding those silly emojis-somehow, it feels more human than retention and average view duration graphs. But all that being said, I agree with you and I'll make more effort to ask meaningful questions. 🙂
👍
Hvala, Hrvoje! ❤️
👍🏾
Thanks, Tyrone! I appreciate it! 🙏
@@CSSWeekly no problem, I appreciate your work!
👍🏻
🙏
👍
Thank you, Eric! 🙂
👍
Thanks so much, Sarah! 🙂
👍
Thanks so much! 🙂
👍
Thanks so much, Tom! 🙏
👍
Thanks so much! 🙂
👍
Thanks so much, Raúl! 🙏
👍
Thanks so much! 🙏
👍
Thanks so much, Lars! 🙏