合理性不适合CSS网格

Question

在这种情况下，为什么要证明合理性：之间的空间不起作用？我想将最后一件项目推到右边缘，然后将中间物品置于中间的边缘。

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>

Answer 1

您快到了，但是您不应使用固定大小8REM（与您的盒子尺寸对齐），而不是使用分数单元fr。

fr一直在拉伸您的网格框，因此，这就是为什么您不能在没有备用空间的情况下应用合理性。

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>

Answer 2

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>

//您必须使用百分比而不是绝对