justify-content does not work for css grid

Issue

Why justify-content: space-between doesnt work in this case? I want to push the last item to the right edge and center the middle one.

div{
  background: lightblue;
  width: 8rem;
  height: 8rem;
}

main{
  margin: 2rem auto;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem 0rem;
  background: yellow;
  justify-content: space-between;
  
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>

Solution

You’re almost there, but instead of using fractional unit fr, you should use a fixed size 8rem (aligned with your box size).

fr has been stretching your grid box, so that’s why you cannot apply justify-content without spare space.

div{
  background: lightblue;
  width: 8rem;
  height: 8rem;
}

main{
  margin: 2rem auto;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(3, 8rem); /*Modify 1fr to 8rem*/
  gap: 5rem 0rem;
  background: yellow;
  justify-content: space-between;
  
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>

Answered By – Nick Vu

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.