search

sanjar-notes / web_dev_fundamentals

The basics - HTML, CSS, Javascript and more
https://sanjar-notes.github.io/web_dev_fundamentals/
3 stars 0 forks source link

justify-content should be changed to 'justify-items' in this article #90

Closed ahmarcode closed 1 year ago

ahmarcode commented 1 year ago

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content

justify-content: space-between; didn't work, but justify-items: center; worked.

ahmarcode commented 1 year ago

Fix the article or fix my understanding

ahmarcode commented 1 year ago

My bad. I used fr (all remaining space) instead of auto (content width). The article is OK. Here's the code:

#listing {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* grid-template-columns: repeat(2, 1fr); */
  /* auto means set width to be content width */

  justify-content: space-around;
}

The justify-items just "seemed" like it worked.

ahmarcode commented 1 year ago

All good, this was a false negative. Be careful when using fr, prefer auto if content width needs to be considered.