CSS网格布局 - 如何在列之间创建等距空间

Question

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

问题的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;
}

- Miha Šušteršič

---

您能提供所需结果的图像吗？ - sol

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>

更新后的代码片段

- Danield

Answer 2

我认为 display: flex; justify-content: center; align-items: center; flex-direction: column; 应该放在测试类中。

- A. Domeika

---

想使用CSS网格获取相同的结果，但理论上你的解决方案是可行的。 - Miha Šušteršič