CODEWITHSUNDEEP
htmlcsscss-grid
Adrian
Adrian

Reputation: 86

justify-content does not work for css grid

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>

Upvotes: 1

Views: 2029

Answers (2)

Nick Vu
Nick Vu

Reputation: 15540

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>

Upvotes: 3

kiarash shamaii
kiarash shamaii

Reputation: 26

div{
  background: lightblue;
  padding: 20px 0;
}

main{

  display: grid;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 5rem 0rem;
  background: yellow;
  justify-content: space-between;
  
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>

//you must use percent not absolute

Upvotes: 0

Related Questions