We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we’re seeing a lot more usage, we’re seeing people want more from grid.
Michelle Barker lists hers wants (and I’ll put my commentary after):
- Styling row and column gaps. I’ve also heard requested styling grid cells directly, rather than needing to place an element there and style that element.
- Multiple gap values. I wanted this just the other week, and I was told to use an empty column or row instead of a gap. The size of that column can be controlled, and things are placed accordingly to treat it like a gap. Sort of OK, except that isn’t particularly friendly to implicit grids.
- Autoflow patterns. This is clever. Check out Michelle’s use case and proposal.
frunit. This is a mindbender. I can see wanting to do something like
calc(1fr - 100px), but then isn’t the leftover space 100px short and 1fr recalcuated to fill that space? Seems infinite loopy.
- Aspect ratio grid cells. I suspect, if we get this, it’ll be a generic aspect ratio solution that will work on any element, including elements placed onto a grid.
Subgrid is also starting to be hotly requested, and I can see why. While building the last page layout I did using grid, I found myself strongly wishing I could share the overall page grid lines within sub-elements.
Rachel Andrew talked about its status about six months ago in CSS Grid Level 2: Here Comes Subgrid. I’m not sure where it’s at now, but I don’t think any browser is supporting it quite yet. (I’m not even sure if the spec is technically done.)
Brad put a point on the desire here:
Container queries and subgrid would make my design system work so much easier.
Define a grid and throw some components in there, then watch them snap into place to the parent grid and look