0

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>
BeefNoodle
  • 123
  • 2
  • 13
  • "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: https://css-tricks.com/snippets/css/complete-guide-grid/. Check the justify-content section. – Aniruddha Shevle Oct 15 '20 at 03:49

1 Answers1

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)

mkours
  • 390
  • 2
  • 11