👀

Alas it isn't in baseline yet :( Learned about that only when I did some crazy stuff with the headers on my portfolio, only to find out it wasn't working at all on Firefox

But this isn't a nested table or grid. It's just a grid.. and just a table. I know how css grid works, quite well actually, it's one of the parts of css I'm actually best at. This is just a simple table though. You would get the alignment out of the box by just using table cells. Unless I'm missing something this isn't an actual use case for subgrid. Subgrid is more useful when you have something that needs to align to the parent when the rest of the content didn't need to align to the parent.

Similar but different, this blog post goes into more detail: Are nested grids like nested tables?

Am I missing something? Isn’t this just <table>?

My bad , didn't realise . Just copied it from my browser thought it should (EDIT : should work now)

Also IDK , don't follow Apple very closely

You goofed the URL, I think, it gives a 404 when I click on it. Here's the correct one https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/. So is apple maybe gonna give us PWAs?

Oh yes my bad, I meant container queries (it's that I always think about the @media screen and (min|max-width=<width>px)

Setting several media queries for div.grid.works to set its width in multiples of 90px * n;

Just to check: wouldn't that have to be container queries? Media queries IIRC can only tell me the size of the browser viewport, but not how much screen state is lost to eg.: toolbars, floats, other containers, margins, etc... so that could easily lead to container overflow.

All that said, I hope this is implemented soon (would love to know how to make a feature request to W3C, bunch o'DRM assholes Firefox) since in theory if it was supported as a declaration natively the engine would take care of accounting for grid gap, etc.

To my humble knowledge it's not possible to do it with css grid alone, as in the current state of the spec concerns, though I'd like to be proven wrong so I'm leaving this comment to potentially trigger a Cunningham's law situation.

I suppose you have some alternatives still:

• Some JS trickery;
• Setting several media queries for div.grid.works to set its width in multiples of 90px * n;
• Use a CSS preprocessor (SCSS, LESS...) to define a function that allows the 3n * 90px thing;
• If browser support is not important for you, I guess you could play with @function

thanks

CSS by itself cannot determine the colors present in an image element, so you won't be able to write a style targeting all your images.

If you're willing to attach a class to all your bright images, you could use the filter property.

HTML

<img class="invert" src="some-bright-image.jpg" />

CSS

.invert {
  filter: invert(1);
}