logo标签列表

CSS网格变量的列宽和换行

csscss-grid
6
我有一个看似简单的任务：给定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 Grid并不是特别熟练，可能忽略了一些简单的东西。

你可以尝试使用 display: flex 和 flex-wrap: wrap 代替 grid。 - sol
是的，这似乎在很大程度上解决了问题；）在确认此答案之前，我还需要检查几件事情。谢谢！ - jmls
2
很遗憾，CSS-Grid无法满足您的要求。它需要至少一个硬编码数字才能初始化网格。Flexbox是您最好的选择。 - Paulie_D
这是我唯一感觉CSS Grid不足的地方。我希望有一个解决这个非常普遍问题的方法。将不得不退而求其次使用老式的Flex，但我现在已经养成了使用Grid的习惯。 :( - Param Singh
@ParamSingh 有点晚了，但是 Grid 并不是设计成一个万能工具，就像 Flexbox 一样。您可以使用 Grid 和 flexbox 一起 按设计 处理其中一个无法单独处理的事情 :-). - TylerH
2个回答
0

我考虑过做同样的事情，从一个12帧的网格开始，然后缩小到像8个帧，最后以4个帧结束。例如：

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;
  }
}

它将看起来像这样

grid 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;
    }
}

结果看起来像这样 grid4

框架的大小被限制为1fr，您还必须注意框架的顺序。您可以从此处开始构建更成熟的解决方案。但我想你已经有了思路。

-3

你试过这个吗：

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

或者

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

不确定这是否是您想要的结果，但这是我理解的。两者都有类似的结果，即包含项目的2行。

感谢您抽出时间进行评论 - 但是我已经尝试过了。 - jmls
所以您希望项目的间距完全相同，就像grid-template-columns: repeat(auto-fill,minmax(20px,max-content))一样，但没有固定宽度？ - user6875529
你是在踩一个已经无人问津的话题吗？而且你提到了一个比这个回复还要晚的帖子，这让我对你的态度产生了疑问。 - user6875529
3
也许我误解了StackOverflow的礼仪，但我要点踩因为这个解决方案是不起作用的（而且很可能从来没有起作用过，因为它违反了规范）。不管这个话题是否已经过时，像我这样的很多人都会碰到这个建议，有可能会浪费时间去尝试使用它。 - Ben Elliott
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接