TWIL October 3rd 2025

Subgrid: how to line up elements to your heart’s content - Saron Yitbarek

I'll cop to being one of the devs who don't use subgrid at all; I'd skimmed a few articles about it and didn't get the usecase. This one by Saron Yitbarek of the Webkit team gave the 'ahaha' moment I needed to understand there actually were a few times this would've been really useful. It turns out that rather than basically just being nested grids (which I somehow got the idea it was), subgrid actually allows you to enforce a consistent grid layout across all children of a grid container.

For example the Setsumeikai Reservation System I developed back at KidsUp would've greatly benefited from this on the opening screen with the grid of schools & their images. You can see (at the time of writing) that some schools have short addresses only taking up one line, while others need two lines. This pulls the extra info about nearby schools and stations up by a line for schools with short addresses, making it look messy.

I could've use subgrid to make sure the image, address and extra info sections all have a height shared between each card, regardless of content, making it look much neater. I think this was actually something management explicitly asked for and I didn't know how to do/decided it was too much effort (surely could've done it with flex anyway??). And I happen to know they've made my replacement basically an external contractor they call when they need stuff done, so doubt he's too keen to pick this up without being asked. So my lack of reading comprehension dooms the eyes of tens of parents to be exposed to slightly inconsistent alignment of text forevermore.