为可变数量的项目定义列，全部在一行中，等间距

Question

我很难描述我要找的东西（在 Google 上搜索）

我有动态徽标内容，可能是 3 个徽标，也可能是 7 个..我的模板需要容纳所有这些内容，它们都需要等距显示在一行中..

例如，如果我事先知道我有 3 件商品，我的代码将是这样

grid-template-columns: 1fr 1fr 1fr;

如果我事先知道我有 7 件商品，我的代码会是这样

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

我不知道我有多少物品。那么我如何编写代码以适应动态数量的列？

Answer 1

此配置适用于 Flexbox，您只需要做的就是

.wrapper {
  display:flex
}
.wrapper img {
  flex:1;
}

使用CSS网格你必须做

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
}

您考虑列流并且定义列的宽度等于 1fr

.wrapper {
  display:grid;
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  grid-gap:5px;
  margin:10px;
}

.wrapper span {
  height:50px;
  background:red;
}

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="wrapper">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

使用grid-auto-columns: 1fr.

网格容器本身会根据需要创建列，每列都是1fr。

无需定义您自己的列。让网格发挥作用。

为可变数量的项目定义列，全部在一行中，等间距

Defining columns for a variable number of items, all in one row, equally spaced

css

css-grid