自动网格列，而无需换行到下一行 [英] Auto Grid columns, without wrapping to next row

问题描述

我希望这3个框彼此相邻显示，且相同的宽度381px

I want this 3 boxes to display next to each other, with same width of 381px

他们的父母是 .boxes ，而他们是 .box

Their parent is .boxes and they are .box

我可以在父级上执行以下操作:

I can do that with the following on parent:

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

但:

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

If in future I want to add one more box, I want that .box to also be 381px wide.

我不想指定数字3，我希望它成为 381像素的无限列(如果出现新框)

I don't want to specify number 3, I want it to be infinite columns of 381px if new box appears

我想获得与以下相同的结果:

I want to achieve same result as:

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

但是我如果它们不适合它们，我不希望它们包装到下一行.

有可能吗?

推荐答案

您只需将流变成如下所示的列:

You simply make the flow to be column like below:

.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>

这篇关于自动网格列，而无需换行到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！