Grid

It’s an interesting and potentially useful trick to have an element know where it is on a grid. That’s tricky enough when the items are in one row/column, but what about when they span?

You can always easily style :hover, but what if you want the NEXT item to have styling too? Or, just a smidge harder, the PREVIOUS item. How about multiple in any direction?

Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here’s a way to get that in native CSS as well as the layout.

Personally, I wouldn’t blame you if you were asked what CSS needs these days and you were like uhm, I think it’s good, actually. These days CSS probably has more in it than you even know about or have tried, making it feel not particularly lacking. But if you really dig into the specifics, you’ll […]

It’s fine. I’m fine. I just like learning ok.

Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let’s use actual math to understand it then apply it to a masonry layout.

Having a width-limited centered column of content is common and good, but what do you do when you need to break out? It’s not hard these days, but it does depend on the situation.

There are usually multiple ways to do the same thing on the web. Sometimes… a lot of ways. Which is “better” can be a matter of taste or which abstraction buys the most value. Check out this CSS example and see which you prefer.

The whole point of auto-fit and auto-fill is that you aren’t saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or […]