css网格可变列宽和换行

Question

我有一个我认为很简单的任务：给定x个项目，将它们显示在网格中，每列是内容的宽度。如果列数超过容器的宽度，则创建新行并继续

我已经设法让列显示和换行，但是仅如果我为列定义固定宽度

https://stackblitz.com/edit/angular4-dxkvmt

如何使每行上的每个“标签”适合内容，但当标签数量超出可用视图空间时移动到新行？

我已经尝试过了

grid-template-columns: repeat(auto-fill,max-content);

这为每个标签提供一行

grid-template-columns: repeat(auto-fill,minmax(20px,max-content));

使所有列都是 20px ..但它们在调整大小时确实可以正常流动

希望得到一些指点。我对 CSS 网格不是特别熟练，所以可能忽略了一些简单的事情

Answer 1

我想过做同样的事情，从 12 帧的网格开始，一直到 8fr 之类的网格，最后以 4fr 结束。例如

grid-template-columns: repeat(4, 1fr);

然后，使用媒体查询，我意识到除了缩小网格之外，我还应该增大图层的大小，其中要跨越的帧数的限制将是网格的大小。例如，让我们想象一下这个基本网格：

.layout.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px 24px;
    gap: 16px 24px;

   .frame, .row {
    display: grid;
    place-items: center;
    grid-column: auto;
  }

  .span-1 {
    grid-column: auto / span 1;
  }

  .span-2 {
    grid-column: auto / span 2;
  }

  .span-3 {
    grid-column: auto / span 3;
  }

  .span-4 {
    grid-column: auto / span 4;
  }

  .span-5 {
    grid-column: auto / span 5;
  }

  .span-6 {
    grid-column: auto / span 6;
  }

  .span-7 {
    grid-column: auto / span 7;
  }

  .span-8 {
    grid-column: auto / span 8;
  }

  .span-9 {
    grid-column: auto / span 9;
  }

  .span-10 {
    grid-column: auto / span 10;
  }

  .span-11 {
    grid-column: auto / span 11;
  }

  .span-12, .row {
    grid-column: auto / span 12;
  }
}

它看起来像这样

但是在媒体查询中，可以说

screen and (max-width: 1278px)

有这样的代码

.layout.grid {
    grid-template-columns: repeat(4, 1fr) auto;

    [class^="span-"], .row {
      grid-column: auto / span 4;
    }

    .span-1 {
      grid-column: auto / span 1;
    }

    .span-2 {
      grid-column: auto / span 2;
    }

    .span-3 {
      grid-column: auto / span 2;
    }
}

结果看起来像这样

框架的大小被定界为

1fr

，并且您还必须注意框架的顺序。您可以从现在开始构建更成熟的解决方案。但我想你明白了。

Answer 2

你试过这个吗：

grid-template-columns: repeat(auto-fill, min-content);

或

grid-template-columns: repeat(auto-fill, max-content);

不确定这是否是您想要的结果，但这就是我的理解。两者都有相似的结果，里面有 2 行项目。