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?

2 comments

2 Comments

wadeyoung5d 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.

the_ben5d ago

What changed your mind, @wadeyoung? I was the same way lol.