CSS Grid Justify-Content doesn't work for all values

Question

Can someone help me to explain why the CSS grid justify-content doesn't work? For this example, when I change the columns to 100px, the justify-content worked but the value stretch didn't work. And then when I change the columns to 1fr, justify-content didn't work for all values. Is there a difference between justify-items and justify-content? I don't understand. CodeAcademy said, "We can use justify-content to position the entire grid along the row axis." What does it mean by the entire grid? Is that all items inside the grid container?

.container{
  display:grid;
  grid-template: repeat(2, 100px)/repeat(4, 1fr);
  border: 1px solid black;
  justify-content: start;
}
.header{
  background-color: skyblue;
  border: 1px solid orange;
}
.main{
  background-color: #C8FE2E;
  border: 1px solid orange;
}
.aside{
  background-color: #F6CEF5;
  border: 1px solid orange;
}
.footer{
  background-color: #A9F5F2;
  border: 1px solid orange;
}

<div class="container">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="aside">Aside</div>
  <div class="footer">Footer</div>
</div>

"We can use justify-content to position the entire grid along the row axis." means that the entire grid container itself will be horizontally aligned! For better understanding: css-tricks.com/snippets/css/complete-guide-grid. Check the justify-content section. — Aniruddha Shevle
– Aniruddha Shevle, Commented Oct 15, 2020 at 3:49

mkours · Accepted Answer · 2021-01-12 21:45:06Z

0

If you set you column fix to 100px, there is nothing to stretch!Its fix! IF you set you column to 1fr you items take all avalible space, there is no space around to justify something. Base on the column-definition some values have (naturally) no effect. May some minmax() is a solution for you Example:

 grid-template-columns: repeat(auto-fill, minmax(150px, max-content));

Take a look here: https://css-tricks.com/snippets/css/complete-guide-grid/ (Best description to start with grid)

answered Jan 12, 2021 at 21:45

mkours

6101 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Grid Justify-Content doesn't work for all values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related