@@jomoc6112 No, it’s not new. This feature has been around for at least 10 years, and it wasn't designed for masonry layouts. It also has accessibility issues. However, a proper way to achieve this in a single line is expected to be available within 1-2 years.
the funny thing is, that I encountered that type of problem about 2 weeks ago, struggled to somehow fix this and gave up on doing flex + media queries to split it into multiple cols when needed. That's a wonderful thing to know now.
The main issue with this is that images are not ordered "correctly" Instead of showing the first images at the top of the list it orders them form top to bottom in the first column, and then it shifts to the next one in the next column, meaning the first top images in the following columns will not be the first images on the list, despite that is a cool workaround when order is not crucial, great work!
@@lucasfranco1758 I don't think there's a way to do it with only css right now, since the order depends on the height of the elements. You can use a library like masonic or masonry-layout, or use javascript to reorder the elements
When I started with webdesign and development in 2013 when HTML5 and CSS3 was barely adopted and responsive webdesign was at it's emerge I CRAVED for such a feature. I remember hacking something together with CSS floats and dozens of lines in JS, calculating height, width, columns etc. Now it's finally there in a simple single line of code. I can die in peace
This is pure gold. If not too much to ask, I'm currently working with large lists and container-visibility, however, performance got worse than not using it in a list of 1000 elements. Would you be able to provide some insight on why and what to do to solve it?
First thank you for the gift. answer the question: In fact, when you use container-visibility in a list with too many elements, it will cause layout and rendering calculations to take place continuously, which will make the website lag, poor performance. Normally, with large lists, programmers will not use container-visibility, the two most popular options are paging or using Lazy Loading.
This would be a perfect solution if the order of images, whether vertical or horizontal, does not matter. The problem with this solution is when you wanted to order the images horizontally. If you can notice in the flex or grid method, the order of the first three images are horizontally laid. When it comes to the columns method however, the same images becomes ordered vertically. I think fixing this issue would involve using javascript to reorder elements/swap rows and columns. But there might be another set of problems for making it responsive lol. I'll think about it next time 😅 Btw, great video as always!
What's crazy is that I was thinking this one was a very recent feature that probably isnt supported in many places. However, it's pretty much supported everywhere. I am mind-boggled why this is the first time I came across this. Thanks! To answer your pinned comment: the video is just the right length with enough information.
I just love this channel funny enough just few days ago i was just telling a friend that i needed to learn this masonry layout (didn't even know what it was called at the time). I tried Both Flex and Grid but couldn't achieve the layout. I manipulated my way around it but it wasn't efficient. Long story short you've just improved my skill and made me a better developer Big thanks to you.
amazing! i can remember first time when I solve this problem I don't know I used almost 200 lines of ungodly javascript and I love the way it's working cuz we always need to add JS to make remaining space divided equally but not anymore.
Nawhh I was literally just making a casting pics gallery for my actor portfolio website, yesterday. Now this shows up in my recommend! I cropped all the images to different sizes to intentionally get this collage looking effect, only to realize it's harder to code than I expected. My first approach was to use three grid columns, too. This helps massively!
However the proposed masonry layout will be from left to right - columns are up down to the next column. In some cases this matters - in some, like yours, the direction of flow does not matter.
Again, the best channel for CSS tips and tricks in details. A lot of hours long courses don`t teach the little things and you are doing it, so its awesome. You are great!
I have been looking for this for a long time until I gave and realized it's no way. 😁 I just saw this today by chance. Thanks for the helpful content. ❤❤🎉
Wow! I've tried it with Tailwind CSS, and it completely transformed the vibe of the webpage-thanks, man. I love learning tricks and tips like this; please share more.
As some people already have mentioned, the ordering causes issues. A lot of the time masonry layout is used with infinite querying to load more images/content. This causes a reordering of the layout and doesn't position the elements correctly. Only useful if you have static content with masonry which is kind of rare.
bro WHAT i overcomplicated this SO MUCH in comparison, thank you for sharing! I watch your channel since the beginning and I am so glad that you are consistent with the quality. Also, thanks for changing the AI voice! I didn't like the old jimmy alike voice, even more since all that stuff about him went public. Cheers!
This is a simplest solution but mind that if you plan to use lazy loading or infinite scrolling where you add new elements to the list as you scroll then the columns will redistribute the elements to fit which will give a very bad experience. Regardless this is great approach if your list is not changing after first render.
Generally in masonry layouts, you want the "first" elements in the list nearest the top. This method stacks things sequentially, so the 3rd item from the left might be the 400th item in the list. The stacking can also look "off" if the object sizes vary a lot. It's cool though, I've used it before.
Is the video too short? If you find it interesting, don't forget to like and subscribe to watch interesting videos about programming and web design.
Bro can you please add something from 3js ... plzzz and animated related content..
Your videos are amazing and can you please bring some 3js content as well for animations...
@@anshikatripathi3466 thanks 4 you correction 🙄.
@@lundeveloper perfect length. Right to the point with no rambling
column-width:20em;
Should do the same thing
Wow this is impressive! Years of CSS development and I never knew Masonry layout could be done that easily! Mindblown!
its new css feature supported only by latest browsers. thats why we did not know this before. the video forgot to said this important information
@@jomoc6112 No, it’s not new. This feature has been around for at least 10 years, and it wasn't designed for masonry layouts. It also has accessibility issues. However, a proper way to achieve this in a single line is expected to be available within 1-2 years.
@@t-m-rwhat are the accessibility issues?
bro is curing my mental health
Like a miracle 😍
@@lundeveloper Miracle Worker😅😅
Bro is casually improving my skills 😢
That's great. 😍😍
Likeee😂😂😂😂😂😂
Facts!
you mean robot?
@@datastatacian anyways, I felt better after that 🤣🤣🤣🤣
the funny thing is, that I encountered that type of problem about 2 weeks ago, struggled to somehow fix this and gave up on doing flex + media queries to split it into multiple cols when needed. That's a wonderful thing to know now.
Probably the best css tricks I’ve seen in many years.
The main issue with this is that images are not ordered "correctly"
Instead of showing the first images at the top of the list it orders them form top to bottom in the first column, and then it shifts to the next one in the next column, meaning the first top images in the following columns will not be the first images on the list, despite that is a cool workaround when order is not crucial, great work!
what would be the easiest way to order them vertically/horizontally?
Exactly, useless in real-life usages
@@lucasfranco1758 I don't think there's a way to do it with only css right now, since the order depends on the height of the elements. You can use a library like masonic or masonry-layout, or use javascript to reorder the elements
Additionally, it has very low browser support so it's not usable rn
@@ben-brady It's showing browser compatibility across the board..
You youngsters have it so easy.
Frame set with table layout ftw
When I started with webdesign and development in 2013 when HTML5 and CSS3 was barely adopted and responsive webdesign was at it's emerge I CRAVED for such a feature. I remember hacking something together with CSS floats and dozens of lines in JS, calculating height, width, columns etc. Now it's finally there in a simple single line of code. I can die in peace
We need videos like this daily, this is just too awesome.
This is pure gold. If not too much to ask, I'm currently working with large lists and container-visibility, however, performance got worse than not using it in a list of 1000 elements. Would you be able to provide some insight on why and what to do to solve it?
First thank you for the gift.
answer the question: In fact, when you use container-visibility in a list with too many elements, it will cause layout and rendering calculations to take place continuously, which will make the website lag, poor performance.
Normally, with large lists, programmers will not use container-visibility, the two most popular options are paging or using Lazy Loading.
It's really just one line of CSS code
ok but can you do that in minecraft also?
Nice solution if the order of the cards is not important. thx
This would be a perfect solution if the order of images, whether vertical or horizontal, does not matter.
The problem with this solution is when you wanted to order the images horizontally. If you can notice in the flex or grid method, the order of the first three images are horizontally laid. When it comes to the columns method however, the same images becomes ordered vertically.
I think fixing this issue would involve using javascript to reorder elements/swap rows and columns. But there might be another set of problems for making it responsive lol. I'll think about it next time 😅
Btw, great video as always!
What's crazy is that I was thinking this one was a very recent feature that probably isnt supported in many places.
However, it's pretty much supported everywhere. I am mind-boggled why this is the first time I came across this.
Thanks!
To answer your pinned comment: the video is just the right length with enough information.
Thats crazy, right ? 😍😍😍
same here mate
Thought exactly about it, very impressive
I just love this channel funny enough just few days ago i was just telling a friend that i needed to learn this masonry layout (didn't even know what it was called at the time). I tried Both Flex and Grid but couldn't achieve the layout. I manipulated my way around it but it wasn't efficient. Long story short you've just improved my skill and made me a better developer Big thanks to you.
amazing! i can remember first time when I solve this problem I don't know I used almost 200 lines of ungodly javascript and I love the way it's working cuz we always need to add JS to make remaining space divided equally but not anymore.
I was thinking about my next projects, and this is what I wanted to do, u are amazing bro!
It's great that this video is out there right when you need it ❤
Nawhh I was literally just making a casting pics gallery for my actor portfolio website, yesterday. Now this shows up in my recommend! I cropped all the images to different sizes to intentionally get this collage looking effect, only to realize it's harder to code than I expected. My first approach was to use three grid columns, too. This helps massively!
Every each video made me realize how much there is to learn.
I'm glad it was useful to you 😊
same thing
🤯You are god of css
This is top tier teaching right here. GODAMNNNNN.
However the proposed masonry layout will be from left to right - columns are up down to the next column. In some cases this matters - in some, like yours, the direction of flow does not matter.
Video is not too short.
The video is exactly perfect time.
In one line :
Man, you’re the best!!!
You got a new subscriber bro. I have started my web dev journey literally 10 days ago, and Still I am finding your videos helpful.
Thank you! So refreshing, I am younger 5 years now! 😊
Bro, amazing! I am instantly subscribing!
as a backend dev I find it fascinating that you can do that in CSS, great stuff!
Man, you are the best web design yt for real, terrific work, keep it up
I have subscribed just watching 2 videos that came on my feed randomly. And you have earned it!
Thank you brother 😍❤️
Dude I've been looking for this tutorial for months!!! Thanks dude!
great video, it's feels like
"hey I've seen this one. this is a classic"
bro your sound effects yrrr Literally epic
Again, the best channel for CSS tips and tricks in details. A lot of hours long courses don`t teach the little things and you are doing it, so its awesome. You are great!
Thank you brother 😍
Oh my god, nothing excites me like this kind of things, which i did not know, i'm genuinely happy. GJ sir
Take my sub!
Masonry layout has always been a problem to me. There are entire libraries to handle this layout, I didn't know this was that simple. Thank you!
Bro is reviving my interest in web dev 😂
I have been looking for this for a long time until I gave and realized it's no way. 😁 I just saw this today by chance. Thanks for the helpful content. ❤❤🎉
Bro, I didnt search for this but this is gold. Thanks!
Wow! I've tried it with Tailwind CSS, and it completely transformed the vibe of the webpage-thanks, man. I love learning tricks and tips like this; please share more.
You are always show coll and useful css tricks. Thank you. Wish you more subscribers!
5 Minutes. 3 different ways with cons and pros. Wow.
(Thanks! ❤)
congrats on 100k!
first time watching u
and i like it!
Thank you so much brother 😍
I been looking for this for 4 years, thanks
And I was just struggling with making Masonry yesterday, you're a genius.
Dude u cured my trauma about learning css perfectly 😢😢😢😢❤❤❤❤
Whole new level of css for backend engineer who do something front end
You appeared on my front page randomly, and it piqued my curiosity. Good content. 👍
Enjoy your well earned sub (though you're now above 100k subs)
Great tip, columns never got the love it deserved when it came out nearly two decades ago. Wonder if you can use a gap property like in grid/flex.
Great video, simple explanation, very good.
Thank you so much for this tutorial. This just pooped up in my YT feed at the right time. 😎
You are original and that why the peopple follow you, PD I like the gas/winds. Greetings from Argentina
i always watch your videos laughing, because I know there will be these random sfx 😂😂
Good content bro 👊
Great bro ❤, keep sharing your experience and knowledge 😁
Oh. My. God.
I avoid CSS but tomorrow i'll dive headfirst into it all because of you!!
I subscribe your channel right away. Crazy and easy to understand your explanation 🐐
This is huge, I been struggling with this type of layout for months.
Glad this video was useful to you
Dude I needed this in work!! Thanks
Just subscribed because of the sound fx because I already knew about columns in css.
Great tutorial tho 👍🏻
Thank You Bro. You Gained Another Subscriber.
Bro you increased my interest in CSS also
This is crazy. Thanks for the tip. I’m gonna use it on my gallery page.
THANK YOU, big fat THANK YOU!! I'll implement that in future projects!
As some people already have mentioned, the ordering causes issues. A lot of the time masonry layout is used with infinite querying to load more images/content. This causes a reordering of the layout and doesn't position the elements correctly.
Only useful if you have static content with masonry which is kind of rare.
Thank God I came across your channel,you're a genius
Thank you for watching my content ❤🔥
Bro loved it you earned a new subscriber ❤
Your content is rare gold.
Looks like i am watching coding anime 😂❤
bro helps me keep my sanity while doing webdevelopment
Awesome video as usual. And, by the way, this AI voice is perfect for the channel and its style. Please keep using it until something better comes up.
Bro spawned in with what I was struggling with the most
I remember back in 2010, the struggle to make a simple layout and hacks to support browser compatibility 😭 it was a pain in the heart 💔
Thanks dud i always wonder how this works and finaly i get to see it with simple code 😊
😊
trong tất cả kênh hướng dẫn CSS cao cấp thì em thấy channel này là hay nhất
Cảm ơn em nhá 😍
SCSS safe my live. but this guy content make me level up.
I was searching this . Thank you
Unbelievable, thanks
Thanks, this will help a lot. :)
That was actually helpful. Thanks
whoa. made me subscribe. good content
What a customized environment ✨
...
I love if you share the customization video for VS code brother ❤.
bro WHAT i overcomplicated this SO MUCH in comparison, thank you for sharing! I watch your channel since the beginning and I am so glad that you are consistent with the quality. Also, thanks for changing the AI voice! I didn't like the old jimmy alike voice, even more since all that stuff about him went public. Cheers!
Yoo this is mind blowing🎉🎉
I am super glad i watched this video ❤
Watching this and you're on exactly 100k
100k sub rồi, chúc mừng chú 🎉
Bro is an angel😃😍
damn those soundeffect are masterpiece
Nice idea. Masonry grids still have accessibility issues because the tab navigation can be different to what you would expect.
this is so helpful thank you for this type of Content,
Thanks for watching my content ❤️
I needed you 2 years ago
Love ❤️ you brother , you really help by your contact...❤❤❤❤❤
Excellent video thanks bro
Thank you ❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥
Subed this was mind blowing 😮
Congrats on the 100k
This is a simplest solution but mind that if you plan to use lazy loading or infinite scrolling where you add new elements to the list as you scroll then the columns will redistribute the elements to fit which will give a very bad experience. Regardless this is great approach if your list is not changing after first render.
Wtf bruhhhh😂😂😂
Am having special headaches rn 😮😮
Generally in masonry layouts, you want the "first" elements in the list nearest the top. This method stacks things sequentially, so the 3rd item from the left might be the 400th item in the list. The stacking can also look "off" if the object sizes vary a lot. It's cool though, I've used it before.
Oh god i'm creating a small website builder app, this is so gonna be helpful for the themes. Thanks 😭
May be I am late to the party but congrats on crossing 100K subs. 🎉