css网格可变列宽和换行

Posted 2023-03-07

【中文标题】css网格可变列宽和换行

【英文标题】：css grid variable column width and wrapping

【发布时间】：2019-01-17 20:33:13

【问题描述】：

我有一个我认为很简单的任务：给定 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 网格不是特别熟练，所以可能忽略了一些简单的事情

【问题讨论】：

您可以尝试使用display: flex 和flex-wrap: wrap 代替网格。

是的 - 这似乎可以解决问题；）在我确认这是答案之前，我需要检查更多的东西。谢谢！

不幸的是，CSS-Grid 无法满足您的要求。它需要至少一个硬编码数字来初始化网格。 Flexbox 是您的最佳选择。

这是我觉得 CSS Grid 唯一不足的地方。我希望有一个解决这个非常常见的问题的方法。将不得不求助于好的旧 Flex，但我现在已经养成了 Grid 的习惯。 :(

@ParamSingh 有点晚了，但 Grid 的设计并不是为了包罗万象，就像 Flexbox 不是一样。 按设计，您可以将 Grid 和 flexbox 一起用于其中一个无法自行处理的事情:-)。

【参考方案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 为界，您还必须注意框架的顺序。您可以从这一点开始构建更成熟的解决方案。但我想你明白了。

【参考方案2】：

你试过了吗：

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

或

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

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

【讨论】：

感谢您抽出宝贵时间发表评论 - 不过我已经尝试过了

所以你希望项目的间距完全相同，比如 grid-template-columns: repeat(auto-fill,minmax(20px,max-content));但没有固定宽度？

您是否对一个死话题投了反对票？此外，您提到在此回复之后发布的帖子这一事实让我质疑您的态度。

@user6875529 也许我误解了 *** 的礼仪，但我不赞成，因为该解决方案不起作用（而且可能从来没有起作用，因为它违反了规范）。不管这个话题是否已经死了，很多像我这样的人都会偶然发现这个建议，并且可能会浪费时间尝试使用它。