自动网格列，不换行到下一行

Question

我希望这3个方框显示在彼此旁边，具有相同的宽度381px

它们的父级是.boxs，它们是.box

我可以通过对父级执行以下操作:

.boxes {
   display: grid;
   grid-template-columns: repeat(3, 381px);
}

但是:

如果将来我想再添加一个框，我希望.box也是381px宽。

我不想指定数字3，如果出现新框，我希望它是381px的无限列

我想达到同样的结果:

grid-template-columns(auto-fit, 381px);

但我不想让他们换到下一排，如果他们装不下的话。

有可能吗？

Answer 1

使用以下几行代码将帮助您实现这一点

.boxes {
    display: grid;
    gap: 10px;
    grid-auto-columns: 381px;
    grid-auto-flow: column; 
}

grid-auto-flow属性定义添加到网格中的新元素是作为“隐式行”还是“隐式列”添加。它的默认值是row，我们希望它是column。

grid-auto-columns属性与grid-template-columns属性相同，不同的是它处理隐式列（由于您将网格定义为只有3列，所以在这3列之后的列将是隐式列）。

Answer 2

您只需将流设置为列，如下所示:

null

.boxes {
  display: grid;
  grid-auto-columns: 381px;
  grid-auto-flow: column; /* this will do the trick */
  grid-gap: 10px;
}

.boxes>* {
  height: 50px;
  background: red;
}

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>