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 thefrunit. This is a mindbender. I can see wanting to do something likecalc(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-areaswithin 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 subgrid feature is part of the level 2 specification. It is incredibly important that if people want browsers to implement this (or any feature) that they keep asking for it.
So, if subgrid is a feature you want, please write up why, give your use cases, comment here. We have the spec, it will no doubt be refined as browser implementors work with it but that’s how spec development works. The CSS WG dont “finish” a spec and throw it at browser engineers. It’s an interative process. What we need now is to see some implementation in browsers – even behind a flag. At that point we can all play with it and give feedback.
Native masonry – for goodness sakes, yes!
I have a more modest list of desires.
SVG elements don’t necessarily scale the same in all browsers with CSS Grid. If you have a variable width column and want that to be filled with an SVG element that should stretch to fit then it probably will do that nicely on Chrome with the minimal amount of CSS and the correct preserveaspectratio settings for the SVG element. But this won’t work on other browsers as you built it in Chrome.
I would also like some CSS grid way of floating an image to one side with text wrapping around. However not having this is good as it means that either I use floats or solve a visual design problem differently, which is a nice challenge to have.
I am not so sure about sub grids as I think ‘inherit’ goes a long way as well as display: contents.
In trying to convert a form to CSS grid the other day I realised that the original form used way too many containers and too much div soup, with divs around the labels and divs around the inputs with a bigger div container around each pair. I just wanted label followed by input with no class tags and certainly no divs in order to get it styled up neatly.
The problem was that the template was used for the backend and the frontend of this particular CMS. So I couldn’t just insto-de-cruft the form and get it styled up for all devices in a brutal amount of seconds. I could have gone ‘display:contents’ recursively on the divs to get what I wanted but really the problem was the content being the usual 2006 vintage div soup.
Therefore I think the lack of sub grid is a good thing. It enforces discipline and document structure rather than hacking existing content to work with the new shiny CSS Grid. Inherit works well for some grid declarations and display: contents works nicely too.
Regarding styling gaps and border things, I think that how it works is great at the moment with clever use of pseudo elements getting you most of the way there. I had hoped that grid gaps would mean never ever using margin or padding ever again, sadly I have not arrived at this promised land yet.
This is CSS Exclusions, currently only supported in Microsoft Edge. Rachel Andrews has a great article on them here. We’re interested in potentially bringing this to Chromium sometime in the future – so it would be great to add your support here
You need Exclusions for that: https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/
I had come across exclusions but I know that isn’t going to work in the target platforms I have at the moment. Plus no polyfill – not that I believe in polyfills.
So for me the current solution is to think differently. Rather than to have the callout on the side with a nice figure in it just put it in another row, imagine everyone is on mobile only and be done with it.
Re: grid tracks as gaps:
Maybe it would be useful if we could mark grid areas as disabled, so that autoplacement doesn’t happen there?
My show stopper was that you cannot animate grid cells. I had integrated grid as the main layout with a reusable pattern (desktop) to dynamically create a center column. https://codepen.io/BRacicot/pen/NBxGwJ
However, not being able to reuse the grid in a sub-grid fashion ruined the experience for me and did cause extra code. This is where I couldn’t see the benefit of using it.
Then came the animation issue. I believe the spec says 5 things should be animatable where browsers have only integrated 3. grid-template-columns and grid-template-rows are not them… I removed my grid strategy with the intent of building reusable flexbox layouts and it is going fantastic actually…
IMHO grid is nowhere near ready for serious production use yet.