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 行。