html - 如何在 CSS 网格布局中对齐三列？

Question

我正在尝试使用 CSS 中的网格布局将三个框放在一个 div(容器)中。只有一排。 Box 1 将靠近左侧，box3 靠近右侧，box2 位于中间。此外，所有框都应垂直居中。

这是我的代码，但我无法按照我描述的方式进行。

.statusBar{
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 50px 1fr 50px 1fr 50px;
  grid-column-gap: auto;
}
.statusBar > div{
  border: 1px solid #000;
}

  <div class='statusBar'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

如果每个小盒子的尺寸都是自动填充的，并且盒子不应该贴在边缘，那就更好了。例如 10px 空间。

我怎样才能让它发挥作用？

Answer 1

像这样在容器和子 div 上使用 justify 属性:

.statusBar {
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
}

.statusBar>div {
  border: 1px solid #000;
}

.statusBar div:first-of-type {
  justify-self: start;
}

.statusBar div:last-of-type {
  justify-self: end;
}

<div class='statusBar'>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem</div>
  <div>Lorem ipsum dolor sit amet.</div>
</div>