This article and video is great solely for the place-item: center option. I didn’t know that existed and it would have saved me hours of work years ago.
place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.
I don’t think I’m a fan of these kind of CSS shorthands. There’s already a LOT of attributes in CSS, did we really need whole new attribute to do do literally nothing more than save one line of CSS? You still have to set display: grid, after all. And if you understand CSS Grid or Flexbox at all then you’re already familiar with align-items and justify-items…
Edit: Obviously this ship has long since sailed, so I guess my comment is not really very useful :)
Yeah this is one quality of life thing that’s still on its way but until then calc works well enough. The perf penalty people talk about isn’t that bad in most cases.
Very cool. Are there native graphics toolkits with the reusability and layout support that the web offers? Cross platform would be great but even just Gnome/Linux would be fine.
This article and video is great solely for the
place-item: center
option. I didn’t know that existed and it would have saved me hours of work years ago.If it makes you feel any better, it’s quite new, so a few years ago, it wouldn’t have saved you all that much time.
CSS Grid has made making responsive sites much much easier, I think.
Sub grid is what’s going to really make them easy
Do you know when sub grids will be supported in Chrome (desktop and mobile)? At the moment only Firefox supports it.
I don’t remember hearing about any of Chromes plans to implement it but I can’t imagine it’s too far away
The devil in me wants to ask what the “one line” means in this context, as they are longer than that.
But all really cool things I should be using.
I think it refers to the yellow-highlighted line in each example, that’s doing the work to build that particular type of layout.
I don’t think I’m a fan of these kind of CSS shorthands. There’s already a LOT of attributes in CSS, did we really need whole new attribute to do do literally nothing more than save one line of CSS? You still have to set
display: grid
, after all. And if you understand CSS Grid or Flexbox at all then you’re already familiar withalign-items
andjustify-items
…Edit: Obviously this ship has long since sailed, so I guess my comment is not really very useful :)
Nice article, but if you need to animate layout, browsers don’t support animating css grid properties and
aspect-ratio
doesn’t work in many browsers.Yeah this is one quality of life thing that’s still on its way but until then
calc
works well enough. The perf penalty people talk about isn’t that bad in most cases.Very cool. Are there native graphics toolkits with the reusability and layout support that the web offers? Cross platform would be great but even just Gnome/Linux would be fine.