Webmasters Gallery

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.
• calc() with the fr unit. 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 great no matter what the container dimensions are.

— Brad Frost (@brad_frost) February 11, 2019

And Ken Bellows writes:

• If we combine subgrid with grid-template-areas within the cards (read my last post if you don’t know about Grid Areas, it’ll blow your mind), complex responsive card-based layouts become trivial.
• The prospect of a subgrid on both axes gives us a way to sort of accomplish relative grid positioning, at least for semantically grouped items, like I wished I had above! Group your stuff in a container, position your container on the grid, make that container a subgrid on both axes, and declare your tracks relative to the subgrid element’s grid position!
• Between Flexbox, Grid, display: contents, and subgrids, we will finally have everything we need to write very slim, clean, semantic markup with basically no fluff or purely structural elements. It will be a huge boon for accessibility, SEO, and just developers trying to understand your markup!

Eric Meyer called subgrid an essential feature three years ago:

This is why I’ve come to the same conclusion other grid experts (like Rachel) already have: subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status. If that means delaying the emergence of grids, I think it’s worth it.

And of course, everybody still wants native masonry. 😉

The post What We Want from Grid appeared first on CSS-Tricks.