css 网格 - 如何在列之间放置相等的 space

Question

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

Fiddle的问题： 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

我会说 display: flex; justify-content: center; align-items: center; flex-direction: column; 应该进入测试 class。

Answer 2

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

来自 the spec（大胆的矿）：

Note that certain values of justify-content and align-content can cause the tracks to be spaced apart (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>

css 网格 - 如何在列之间放置相等的 space

css grid - how do I put equal space between columns

html

css

css-grid

Updated fiddle