People have pointed out to what’s
Obviously wrong with the JS tooling but I had more problems with CSS style sheets generated at runtime or web components attached stylesheets
They all work is just editing their styles that seems to be a pain, you straight up cannot edit a shared stylesheet attached to an web components elements shadow dom.
If you generate enough styles in JS you may not be to edit them correctly (as in it shed you the wrong styles for the element)
I have never understood the complaints about Safari and at this point it feels more like parroting than anything grounded in facts.
Unless I am using Windows (which I use for anything except gaming sparingly) Safari is my primary browser on my Mac and I stick with it on my iPhone and iPad. It does what I need it to do and I never have issues as a user. It works with the plugins I need it to work with (mostly 1Password).
I am sure there are genuine issues with the browser just like with any software, but it is already past "decent" and does its job.
And using named grid-template-areas stacks the items you move to the sidebar on top of each other, so you only see one of them at a time. Eventualy I hope that https://github.com/w3c/csswg-drafts/issues/9098 will land and we'll be able to use this saner way to do it.
For a new project I looked into supporting grid-lanes with the polyfill on Simon Willisons website. But sadly the polyfill is not comparible to the native experience. The column width calculation is off.
The "brick" layout creates rows, yes. When a regular person looks at it, they will see rows. But Grid Lanes flows content up and down, not across the row.
If you just want content to flow down one row, then the next, then the next, Flexbox is a better solution.
The whole point of masonry layout is that content flows perpendicular to the lane.
13 comments
[ 3.4 ms ] story [ 35.7 ms ] threadThey all work is just editing their styles that seems to be a pain, you straight up cannot edit a shared stylesheet attached to an web components elements shadow dom.
If you generate enough styles in JS you may not be to edit them correctly (as in it shed you the wrong styles for the element)
Unless I am using Windows (which I use for anything except gaming sparingly) Safari is my primary browser on my Mac and I stick with it on my iPhone and iPad. It does what I need it to do and I never have issues as a user. It works with the plugins I need it to work with (mostly 1Password).
I am sure there are genuine issues with the browser just like with any software, but it is already past "decent" and does its job.
[0]: https://www.merriam-webster.com/dictionary/decent
Regarding CSS Grid Lanes, I find it to be a better name than "masonry".
I'm not sure how often I'd actually reach for grid lanes, but I guess not often.
What good use cases would you see for grid lanes today?
[0]: <out of topic>If anything, Chrome is the new IE: is a monopoly imposing its quirks and "standards" on others.</out of topic>
Fully responsive layouts, where sidebar content is interleaved with page content on small screens, but in a sidebar on larger screens.
Demo: https://codepen.io/pbowyer/pen/raLBVaV
Reordering the content on larger screens would be the icing on the cake but for now I'll take just doing it.
CSS Grid didn't solve this, as it added gaps: https://codepen.io/pbowyer/pen/azNarbZ
And using named grid-template-areas stacks the items you move to the sidebar on top of each other, so you only see one of them at a time. Eventualy I hope that https://github.com/w3c/csswg-drafts/issues/9098 will land and we'll be able to use this saner way to do it.
If you just want content to flow down one row, then the next, then the next, Flexbox is a better solution.
The whole point of masonry layout is that content flows perpendicular to the lane.