证明内容不适用于 css 网格

Question

为什么 justify-content: space-between 在这种情况下不起作用？我想将最后一项推到右边缘并将中间一项居中。

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

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>

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

Answer 2

你就快完成了，但不要使用小数单位 fr，你应该使用固定大小 8rem（与你的框大小对齐）。

fr 一直在拉伸您的网格框，所以这就是为什么您不能在没有备用 space.

的情况下应用 justify-content

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>

证明内容不适用于 css 网格

justify-content does not work for css grid

html

css

css-grid