@@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.
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!
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
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.
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!
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 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. ❤❤🎉
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.
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!
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.
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.
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 🤣🤣🤣🤣
You youngsters have it so easy.
Frame set with table layout ftw
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.
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!
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..
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
Probably the best css tricks I’ve seen in many years.
Nice solution if the order of the cards is not important. thx
We need videos like this daily, this is just too awesome.
Thank you! So refreshing, I am younger 5 years now! 😊
Great video, simple explanation, very good.
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.
🤯You are god of css
This is top tier teaching right here. GODAMNNNNN.
It's really just one line of CSS code
ok but can you do that in minecraft also?
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.
as a backend dev I find it fascinating that you can do that in CSS, great stuff!
Bro is reviving my interest in web dev 😂
Oh. My. God.
I avoid CSS but tomorrow i'll dive headfirst into it all because of you!!
Every each video made me realize how much there is to learn.
I'm glad it was useful to you 😊
same thing
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!
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!
5 Minutes. 3 different ways with cons and pros. Wow.
(Thanks! ❤)
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.
Your content is rare gold.
Looks like i am watching coding anime 😂❤
great video, it's feels like
"hey I've seen this one. this is a classic"
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. ❤❤🎉
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, I didnt search for this but this is gold. Thanks!
Dude u cured my trauma about learning css perfectly 😢😢😢😢❤❤❤❤
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 😍
Dude I've been looking for this tutorial for months!!! Thanks dude!
Nice idea. Masonry grids still have accessibility issues because the tab navigation can be different to what you would expect.
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.
whoa. made me subscribe. good content
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á 😍
That was actually helpful. Thanks
Bro you increased my interest in CSS also
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 ❤
this is so helpful thank you for this type of Content,
Thanks for watching my content ❤️
Great bro ❤, keep sharing your experience and knowledge 😁
Cool tech brother, leaving my sub!
THANK YOU, big fat THANK YOU!! I'll implement that in future projects!
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.
0:50 thought about subscribing 1:08 subscribed
This is beautifully efficient. Bravo. 👏
Bravo. 👏 😁
Excellent video thanks bro
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.
Very informative thanks alot
Thank you so much for this tutorial. This just pooped up in my YT feed at the right time. 😎
Tks a lot. This is very useful
Man, you are the best web design yt for real, terrific work, keep it up
I was searching this . Thank you
Subed this was mind blowing 😮
Dude I needed this in work!! Thanks
I been looking for this for 4 years, thanks
SCSS safe my live. but this guy content make me level up.
This is huge, I been struggling with this type of layout for months.
Glad this video was useful to you
And I was just struggling with making Masonry yesterday, you're a genius.
This is crazy. Thanks for the tip. I’m gonna use it on my gallery page.
Bro loved it you earned a new subscriber ❤
You are always show coll and useful css tricks. Thank you. Wish you more subscribers!
If you have a list that has 20 items, how do you prevent content inside the from flowing into the next column?
Try setting it to display: block instead of inline-block :)
damn those soundeffect are masterpiece
I am super glad i watched this video ❤
Thanks, this will help a lot. :)
You are original and that why the peopple follow you, PD I like the gas/winds. Greetings from Argentina
thanks, bro. your video is very helpfull to improving my skill
Pretty dope, thank you for sharing this 🙂
I subscribe your channel right away. Crazy and easy to understand your explanation 🐐
Thank God I came across your channel,you're a genius
Thank you for watching my content ❤🔥
Yoo this is mind blowing🎉🎉
I have subscribed just watching 2 videos that came on my feed randomly. And you have earned it!
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!
this is the best ever .
So may thanks
Thanks brother 😍
congrats on 100k!
first time watching u
and i like it!
Thank you so much brother 😍
Wow thanks for the tips !
Wtf bruhhhh😂😂😂
Am having special headaches rn 😮😮
Bro is an angel😃😍
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.
Congrats on the 100k
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.
Thats awesome :D
bro helps me keep my sanity while doing webdevelopment
Thanks dud i always wonder how this works and finaly i get to see it with simple code 😊
😊
Video is not too short.
The video is exactly perfect time.
In one line :
Man, you’re the best!!!
I needed you 2 years ago
i always watch your videos laughing, because I know there will be these random sfx 😂😂
Good content bro 👊
Whole new level of css for backend engineer who do something front end
You are giving very useful resource video and I really like it
Thank you bro 😍
@@lundeveloper You're welcome bro, I'm expecting from useful videos 👍👍🙌🙌
Absolutily amazing trick!
Greetings from Yemen , u have a unique content , ty for that
Thank you so much brother, love Yemen
Amazing know-how, thanks a lot!
Oh god i'm creating a small website builder app, this is so gonna be helpful for the themes. Thanks 😭
What a customized environment ✨
...
I love if you share the customization video for VS code brother ❤.
Great tutorial. Thanks for sharing.
The best selling advertisement of your channel. Like and subscribe immediately! Thanks a lot
Thank you 😍