css grid - 如何在列之间放置相等的空间

Question

尝试为我的应用程序导航栏设置 CSS 网格布局，但我无法让 justify-content 属性正常工作。在这里，我试图将其设置为中心，但我真正想要的是一种布局，其中装订线空间根据可用空间扩展。

问题的小提琴： https: //jsfiddle.net/epch33vx/

我的HTML：

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

我的样式表：

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-items: center;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

Answer 1

只需替换justify-items: center;为justify-content: space-between;

从规范（粗体我的）：

请注意，justify-content 和align-content 的某些值可能会导致轨道间隔开（space-around、space- Between、 space-evenly）

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-content: space-between;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

更新了小提琴