Masonry layout with CSS only!
HTML-код
- Опубликовано: 11 июл 2024
- The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell12201
Masonry Layouts have been around forever now, and considering that they are surprisingly hard to actually implement. Well, not so much now that they are coming to CSS at last! It's still in the very early stages, only working in Firefox Nighty as I upload this, but it's in the works and hopefully, we don't have to wait too long before it becomes widely supported.
Because it does have poor browser support, I also take a look at a possible fallback using CSS Columns as well 😊.
Codepen: codepen.io/kevinpowell/pen/yL...
/// Timestamps
00:00 - intro
01:07 - basics of masonry
05:17 - using spans
06:55 - align-tracks
08:45 - creating a fallback
13:18 - making it more robust
15:38 - outro
This video was sponsored by Skillshare
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
2 years later, support is the same. For anyone wondering can they use this: no, you can't.
grid-template-rows: masonry is STILL only supported as an experimental feature in firefox that you have to enable first.
This is so infuriating.
However, you can use the display: columns fallback that he outlines...
still same
It still doesn't work today, such a joy killer
2024 and still 0% availability ...
CSS Grid with Flexbox finally feels like design as it was meant to be implemented in code form, thank God we're not relying on floats or tables anymore! :)
Everytime I watch a video of yours I am reminded of the wholesomeness of your channel and the content you produce. It's just so nicely and concisely presented.
I was just thinking about this kind of layout a couple days ago. Thanks for posting. Hopefilly it'll get broader support sooner than later.
Been loving grid and flexbox... changed everything! That's what is exciting to me! So much less markup!
Ya know what else is awesome: Kevin Powell! Thanks bro for another helpful vid.
Great work, Kev. Many thanks.
grid-template-row: masonry ? Mind blowing. Awesome, Kevin!
Love it! Love iiiiiiiiiiiiT! :D Thanks Kevin!
Holy Hannah! This is such a timesaver. Looking forward to future support in other browsers.
This was extremely helpful! Thanks a lot!
Thats an amazing technique that I also use on my css also, but I loved the way you explained it!
Wow this is great 😍
Even the column solution is wonderful!
Another great video
Thnx Kevin, you're the best 🙏
Thanks Kevin. You are great.
It's working. Thanks a lot. Subscribed. 👍
Awesome,also currently enjoying your scrimba course 😀😀😀
Awesome !
great video - thanks!
Great! Thank You!
Great work sir, this video helps me to make a dynamic gallery page. Thank you..
Thank you so much ❤️
Many Many Thanks !!!
Playing with backdrop-filter lately - lots of fun
Thanks for the tutorial
Thank you so much sir.
you're a life saver
Magic. I remember the struggles trying to get this done without it, sucked hard.
Thank You
Este tutorial é perfeito :)
Perfect tutorial :)
Kevin our CSS god.
This is amazing!!! I love masonry layouts and include them in almost all my projects, this will be a game changer!
Muito obrigada pelo seu vídeo, me ajudou muito.
Took this and made `--gap` and `--columns` responsive! Works like a charm. The only thing I still need to figure out is how the hell to deal with edge cases where images in the masonry are not balanced according to width and height, even tho, they could be!
Still no browser support 😭
I like how you can apply image affects straight in css, only for background images I think
That's why I like you! 💚💙❤️🔥
You can only use the column property if you have a finite number of cards if you don't the layout is gonna be changing continuously. And the common use of masonry layout is in some kind of news site.
Ive been waiting for this. On one of my sites I use columns:5; which is not ideal because it aligns content from top to bottom instead of left to right. I can't wait for it to become more mainstream (in about 5 years ugh, that's the downside of web development)
I've just done this on a charity site and I had to use css columns. Works well enough but you can't span properly and drop shadows cause issues. You can get around this by using CSS filter drop shadow with a wrapper around every child in the masonry and then applying padding to each wrapper. You need to do this as the shadows get clipped otherwise. I'll do a video as this took me several days of messing around to work out.
I've used columns at work and it works on chrome but breaks on FireFox so after watching this I'm considering converting it to grid.
@@nathanaelsmith3553 yeah but browser support is none existent at the moment. When it only works in Firefox nightly that is not a workable solution right now. I’ve actually found Firefox the most reliable browser with columns it views my site perfectly and was the only browser that did.
@@techtipsuk I mean vanilla grid - not this new feature of grid
Nice just started watching you im lacking in css :P
Wow. Thought I knew grid but had never heard of align-tracks or the masonry value
Nice vid. Have you made a tutorial for masonry layout with JS?
It's really amazing. This tutorial solved my problem very quickly.
But grid-template-rows don't work. same as align-tracks. Can you give me an idea about them (align-tracks, grid-template-rows), please?
Thanks @Kevin
grid-template-rows: masonry; not working for me, both on Safari and Chrome (on Mac, last update done).
Am I doing something wrong or it's the browser support?
anyone else noticing that the "featured" class doesn't work in his example code (on codepen) when using masonry?
(but it does when grid-template-rows: masonry; is turned off)
Almost a year has passed and nothing of support for this feature :/
Looks awesome, can't wait until it's released bug(s) free
OK, I should have viewed it completely before commenting.....
cool
What's interesting is that display: column was not supported when I was testing this on Live Server / Chrome on my Local PC. Will search for column videos now to see if there's something I am missing.
Love u sir. Next video should be on Glassmorphism
Great idea, though I have a few in the pipeline already so it might be a little bit
@@KevinPowell ok sir. Thanks a lot for such a good content
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell12201
I had a big brain fart on this one with the columns. As CK002 kindly pointed out, there is no such thing as display: columns. It's invalid and literally does nothing at all. Just throw a `columns: 3` or whatever you need on there are you're good to go.
Got i!
Still no browser support in December 2023. Does anyone know why?
not working in chrome or any other browser and column property will not work with overflow-x auto if i want to make it scroll with limited height.
My God ...😮😮
"display: column" is not supported by chrome, is it like it was supported 2yrs ago and not now?
@Kevin is there a better way now with flex or gird?
Not yet...
Interesting idea, would this work for a blog to display in date order, top to bottom and left to right?
It would, yup!
@@KevinPowell haha just read it back got that the wrong way round, doh, should have said left to right and then top to bottom, so in rows. Going to have to have a play with this and see what is possible, thanks Kevin
grid-template-rows: masonry showing invalid property
Hi Kevin Powell i need for your help. How can i contact?
watching you, makes me feel anything is possible with css, love from india!!!!
grid-template-rows: masonry; is not working
Does this work in other explolers for now? Like, does it work for Chrome, Safari, Edge, Opera etc.?
Not yet, it's still something that's being worked on. It might be awhile, as it's part of the level 3 specification of grid. level 2 is subgrid and there isn't much movement on that yet either.
@@KevinPowell Thank you sir
Great video! It is still not supported by Chrome... shame...
will be cool to use in 2030 when we have to built 3d hologram layouts~
*display: column;* is an invalid property.
Talk about a brain fart on my side there! You just need to put in columns: and how many you want. Thanks for mentioning it, I'll pin a comment to the top.
3 Years Later: For anyone wondering if they can use this, the answer is no, you can't.
grid-template-rows: masonry is STILL only supported as an experimental feature in firefox that you have to enable first.
Can you do a video about background position?
I have it on my todo list :)
Hi. When This will be capatible with all browsers?
...it only took Chrome and Safari 4 years to gain support for subgrid... so, another 4 years? 😭 - Honestly, no idea, and now that they all support subgrid hopefully we see them start to work on this, since it's the next level in the grid spec, but I'm not holding my breath.
@@KevinPowell I have a php image download website where I want to use masonry layout. Currenly, I am using css column property. It looks like masonry but not exactly from row perspective... Please suggest me the best possible way...
why not use columns: 3; > div { break-inside: avoid } That also works masonry. Not as cool as grid but in 2022 the masonry attr still not availble in browsers
grid-template-rows: masonry; is not working. Why?
Are you using Firefox?
@@leomacherla yeah
I never understand why we can not have units of measurement on % related to the parent conteiner, similar as we have "vw" and "vh" with respect the viewscreen. It would make everything much easier.
I hear that it would be impossible to set because the parent can not be defined? or something like that.. Why not? You just need a well defined parent, and from that you get your chain of units one derivative from the other.
Also.. if this can be done in javascript, why browsers can not do it as well?
You can use % for that though? like, width: 50% would be 50% of the width of it's parent container...
@@KevinPowell No I cant.. because if I want to set the width to 100% of the parent width and a height of 50% of the parent width (to keep certain ratio), then I cant.
Instead with "vw" and "vh" I can do that, I can said width: 100vw and height: 60vw, but we dont have an unit like that with respect to the parent container, only to the viewscreen.
The same for width: 40vh and height: 20vh for example.
Having those units, it would make any responsive layout super easy to make.
In order to achieve similar ratios right now, we have to do weird tricks with the padding.
@@AngelLestat2 they are working on a as aspect-ratio property!
@@KevinPowell yeah, I read that. I guess that could be enough, but still surprise that this feature was not implemented before or that I did not see too much people asking for that in all these last years.
Maybe is tricky to implement without performance issues.
@@KevinPowell aspect-ratio still only has 90% support. Image every 10th person can't use your service
Unfortunately does not work in Safari
I also do videos about programming!😁
still not available in common browsers
Positioning is not possible in GRID? Please guide.
What do you mean?
@@KevinPowell Some divs are arranged by grid. Now I want to place two inside one of those divs. For doing so we have to position those *2 divs.* Is it possible?
E.g: How can we place inside ?
more easy
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
Still only on firefox 🙃
Hy kevin can I get an answer.. Bcz no. One reply me on discord (sadly 😞😤)
"hi guys,
i've just watched kevin's last video about masonry layout...
i see kevin used some css property for chrome fallback..
```css
display:column;
columns:3;
```
Im curious and try that on my chrome...
but i got this working property instead...
```css
display: table-column;
column-count: 4;
```
why is this happening..?
i got different property...
note that my chrome latest update...
thanks"
this is my question link on discord if you prefer to answer there...
discord.com/channels/436251713830125568/535502841943687179/786435897612435486
Masonry value is still not supported in most browsers
Browsers still has not gained support for it... 0% support in caniuse
It's coming... eventually... we're still waiting on subgrid from most of them, once that lands, they can eventually get started on this :D
And still not implemented huh? :(
Hi
From document of developer.mozilla, grid-template-rows: masonry - This feature is only implemented in Firefox