T
19

Can we talk about using grid-auto-flow: dense for image galleries?

I was building a masonry-style gallery for a client's portfolio site last month and kept hitting gaps with different sized images. My coworker said to try 'grid-auto-flow: dense' but I was sure it would just make a messy order. After three tries, I set it up and it actually packed everything tight without changing my HTML. Now I'm torn because it works great visually but can mess up the reading order for screen readers. Has anyone found a solid fix for the accessibility side, or do you avoid this trick completely?
3 comments

Log in to join the discussion

Log In
3 Comments
nina834
nina83411d ago
Totally feel you on this one @wadeyoung, the accessibility side is what keeps me up at night too. I've been using dense but with a logical source order in the HTML and it feels like a compromise that still isn't perfect.
8
wadeyoung
wadeyoung2mo ago
Used to think dense packing was a total hack. Seeing it actually work on a real project changed my mind though. The accessibility trade-off is the real problem nobody talks about.
6
the_ben
the_ben2mo ago
What changed your mind, @wadeyoung? I was the same way lol.
2