Post

Getting information from a simple grid is good, but what about a complex one where the items are randomly placed? 👀 css-tip.com/grid-informa... A fancy demo powered by Scroll-Driven Animations and more! All the values are calculated and displayed using only CSS.

CSS by T. Afif@css-only.dev

An interactive demo showing how all the values adjust in real time as the grid is resized. codepen.io/t_afif/full/... via @codepen.io All the values are integers, so you can use counters to display them.

1/9/26, 10:34 am0 reposts22 likes

CSS by T. Afif

@css-only.dev

1 Sept

@bram.us challenge done ✅ Now, I need to write the article to explain all that black magic around Scroll-Driven Animations 🫣

Maikel Krause

@maikelkrause.bsky.social

1 Sept

I wonder if you could use this for a CSS-only overflow menu somehow. If items know which rows they're in they would know whether they've "overflowed" or not. Combine that with a copy of the grid in an overflow menu where all the items in the first row are hidden.

CSS by T. Afif

@css-only.dev

1 Sept

You will for sure hit the classic infinite loop. The information I am getting depends on the element position/visibility. If I try to hide it/move it, the information will change.

Maikel Krause

@maikelkrause.bsky.social

1 Sept

Darn 🥲