News for hackers. Stuff that matters.

A comment on CSS Tips. Parent comment

Re:CSS Tips by tenaciousDaniel on Monday April 26, 2021 @02:34PM (#26946182)
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.
[ Parent | on HN ]
Re:CSS Tips by papito on Monday April 26, 2021 @03:19PM (#26946784)
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-g...

[ Parent | on HN ]
Re:CSS Tips by vsareto on Monday April 26, 2021 @02:40PM (#26946293)
It's shorthand: 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_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.

[ Parent | on HN ]
Re:CSS Tips by no_wizard on Tuesday April 27, 2021 @01:50AM (#26952472)
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

[ Parent | on HN ]
Re:CSS Tips by tshaddox on Monday April 26, 2021 @02:40PM (#26946288)
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.
[ Parent | on HN ]
Re:CSS Tips by joestrong on Tuesday April 27, 2021 @04:45AM (#26953530)
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

I think there's a lot of confusion for most people between justify-content/justify-items and align-content/align-items

[ Parent | on HN ]
Re:CSS Tips by tenaciousDaniel on Monday April 26, 2021 @02:53PM (#26946472)
Ah, I see. Thanks!
[ Parent | on HN ]
Re:CSS Tips by runarberg on Monday April 26, 2021 @03:43PM (#26947086)
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/ 2: https://preset-env.cssdb.org/features#place-properties

[ Parent | on HN ]
Re:CSS Tips by Izkata on Monday April 26, 2021 @03:33PM (#26946965)
Don't forget align-content and justify-items !
[ Parent | on HN ]