Naming Things is Hard

Experimenting with CSS Grid

I've finally started playing with CSS Grid, and I like what I see, based on some real simplistic experimentation. Like, I want this, real bad. Like my early efforts with flexbox, it feels rather intuitive, so much so that I start to get nervous, like I'm missing something. Which I'm sure I am, since I haven't tried to do anything particularly real with it yet. But, then, I did full site layouts with flexbox, early on enough that it's been a long time since I've had to think about float-based layouts, and so I guess I expect that grid really shouldn't be much less (if at all less) intuitive than any of that.

One area where it might feel a little too intuitive is in the idea of subgrids. Intuitively speaking I started throwing code around that expected sub-items would recognize the existence of the parent grid, which, no, that's not how the grid works. Turns out there is a subgrid display property but it's not yet available. Which, well, I want it, even though I don't know how exactly I'd use it yet. Perhaps this is an area where my mixed print/web background shines through; I've spent enough time in InDesign to have this gut-level sense that, if there's a grid, literally anything anywhere should be able to know about it, and should be able to line itself up to the grid, or not, depending on the need. I think when I have a good need for it I'll get where I need to go with some careful CSSing, but, oh, it would be nice to just grid all the things without having to think about gridding all the things.

I'm also sure I've misguided myself about some things, how this is supposed to be used; I kept running into half-baked moments in my head that lead to content overflowing boundaries in unexpected ways. But I think that will shake out once I use it for real instead of for made-up flights-of-fancy.

Blog images

Screenshot of Firefox Developer Tools showing a css grid layout experiment.

tags

Home & About & Micro.blog & Feed (Atom)