5 ms·

this is my first time seeing the `place-items` property. at first glance I have no idea how it relates to `align-items` or `justify-content`. Feels like the gri

this is my first time seeing the `place-items` property. at first glance I have no idea how it relates to `align-items` or `justify-content`. Feels like the grid API is getting a bit too cumbersome but maybe its just me.

tshaddox 5y ago
place-items is just a shorthand property that takes 2 arguments. The first argument sets the align-items value and the second argument sets the justify-content value. If only one argument is provided (as in this example), it sets both align-items and justify-content to that value.
- joestrong 5y ago
  Actually, this is technically incorrect. It doesn't set justify-content, it sets justify-items. This is why it works with grid, and not flexbox Source: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items I think there's a lot of confusion for most people between justify-content/justify-items and align-content/align-items
- tenaciousDaniel 5y ago
  Ah, I see. Thanks!
vsareto 5y ago
It's shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items MDN also has a list of shorthand properties if someone didn't know what 'shorthand property' really meant: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_p... But yeah, the discoverability or suggestion-to-refactor-something-to-shorthand is typically non-existent in CSS. Lists like these are really the only way I discover CSS stuff.
- no_wizard 5y ago
  May I suggest trying out webstorm or any other JetBrains IDE? They have the best CSS completion I’ve ever seen, and it includes live (and cached) mdn documentation for each rule. It also suggests shorthand collapses as a feature
papito 5y ago
I am a backend engineer, but I need to do work on UI for my personal project. This guide from Rachel Andrew on CSS grid and flexbox is superb. She will take you from a n00b to a total Grid Ninja. https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/ https://www.smashingmagazine.com/2020/01/understanding-css-g...
Izkata 5y ago
Don't forget align-content and justify-items !
runarberg 5y ago
If you use PostCSS, postcss-preset-env[1] is pretty neat for reading up on the latest features. E.g. here is the place properties feature[2]. 1: https://preset-env.cssdb.org/ https://preset-env.cssdb.org/ 2: https://preset-env.cssdb.org/features#place-properties https://preset-env.cssdb.org/features#place-properties

tshaddox 5y ago

place-items is just a shorthand property that takes 2 arguments. The first argument sets the align-items value and the second argument sets the justify-content value. If only one argument is provided (as in this example), it sets both align-items and justify-content to that value.

joestrong 5y ago
Actually, this is technically incorrect. It doesn't set justify-content, it sets justify-items. This is why it works with grid, and not flexbox Source: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items I think there's a lot of confusion for most people between justify-content/justify-items and align-content/align-items
tenaciousDaniel 5y ago
Ah, I see. Thanks!

vsareto 5y ago

It's shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items MDN also has a list of shorthand properties if someone didn't know what 'shorthand property' really meant: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_p... But yeah, the discoverability or suggestion-to-refactor-something-to-shorthand is typically non-existent in CSS. Lists like these are really the only way I discover CSS stuff.

no_wizard 5y ago
May I suggest trying out webstorm or any other JetBrains IDE? They have the best CSS completion I’ve ever seen, and it includes live (and cached) mdn documentation for each rule. It also suggests shorthand collapses as a feature

papito 5y ago

I am a backend engineer, but I need to do work on UI for my personal project. This guide from Rachel Andrew on CSS grid and flexbox is superb. She will take you from a n00b to a total Grid Ninja. https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/ https://www.smashingmagazine.com/2020/01/understanding-css-g...

Izkata 5y ago

Don't forget align-content and justify-items !

runarberg 5y ago

If you use PostCSS, postcss-preset-env[1] is pretty neat for reading up on the latest features. E.g. here is the place properties feature[2]. 1: https://preset-env.cssdb.org/ https://preset-env.cssdb.org/ 2: https://preset-env.cssdb.org/features#place-properties https://preset-env.cssdb.org/features#place-properties