Source Grid — watch for invisible gutters!

And that’s fine — there is no reason why any user needs to care about these things. But I used to listen to these kinds of arguments from clients: “Nobody knows the difference between this font and Times Roman”, and it was probably true. However, I knew the difference. And these days what’s different for me is that I don’t care any more whether anybody cares or not. I care. These details are important to me. I like them. I like that it’s possible to be always improving and refining things, and that there are always new possibilities to try. I’m thinking about this project and suddenly there’s a new thought: actually, what I really want is that — at each breakpoint where the number of columns changes — the cards always start out being the same size, with the same gaps. That hadn’t occurred to me before, but now it has, it makes more sense to me. Maybe nobody will ever notice, but I’ll know it. And I’ll get a lot of pleasure out of that. Because, for me, these kinds of details are what makes doing any of this worthwhile.

2 Likes

I actually think it should be termed an incurable affliction that you and I (and a few others) should be labelled with.

However, all this stuff is important and it’s what drives the best developers to improve their products so we can build better solutions.

Stacks and all good web page builders, can develop in an organic, heathy and creative way, often fed and fuelled by users or they can stagnate with a set of features that don’t improve over time.

Regarding grid item sizing, there are 2 other useful grid content size controls that I like to use:

Using a Calc Font size to maintain content size at different screen sizes by scaling the font size -

Clamping the number of lines to a max number.

I in blog I clamped the summary to 3 lines and post title to 2, but found it was overkill due to it becoming too uniform. I now only clamp the summary to provide some control over the summary which is now free to grow large, but leave the title unclamped to provide some randomness in the layout.