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

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

问题的症结：

我的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>

---

我会说

display:flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱应该进入测试类。
我会说
display:flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱应该进入测试类。
只需替换
证明项目：居中与
对齐内容：之间的空格

来自（我的粗体）：

请注意，可以使用“对齐内容”和“对齐内容”的某些值
使轨道间隔开（周围间隔，之间间隔，，
间距均匀）


.test{
显示：网格；
网格模板列：重复（4，最小值（56px，80px））；
位置：固定；
底部：0；
左：0；
宽度：100%；
盒影：0.02pxRGBA（0,0,0,0.12），0.2px4pRGBA（0,0,0,0.24）；
证明内容：之间的空间；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
最小高度：56px；
字体大小：14px；
文字装饰：无；
}

1.
2.
3.
4.
只需更换
对正项目：居中与
对齐内容：之间的空格

来自（我的粗体）：

请注意，可以使用“对齐内容”和“对齐内容”的某些值
使轨道间隔开（周围间隔，之间间隔，，
间距均匀）


.test{
显示：网格；
网格模板列：重复（4，最小值（56px，80px））；
位置：固定；
底部：0；
左：0；
宽度：100%；
盒影：0.02pxRGBA（0,0,0,0.12），0.2px4pRGBA（0,0,0,0.24）；
证明内容：之间的空间；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
最小高度：56px；
字体大小：14px；
文字装饰：无；
}

1.
2.
3.
4.
能否提供所需结果的图像？能否提供所需结果的图像？希望使用css网格获得相同的结果，但理论上您的解决方案工作希望使用css网格获得相同的结果，但理论上您的解决方案工作
.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;
}