Css grid-template-columns minmax 小于规定的最大值？答案

【问题标题】：Css grid-template-columns minmax going smaller than the stated max?Css grid-template-columns minmax 小于规定的最大值？
【发布时间】：2020-01-29 08:05:55
【问题描述】：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
column-gap: 5px;
row-gap: 5px;
grid-auto-flow: dense;

我有上面的代码来创建一个响应式网格。列的最小大小应为 80 像素。我正在用 div 填充网格以将其可视化。它们是以下代码。

grid-row: span 4;
grid-column: span 4;
background-color: green;

grid-row: span 2;
grid-column: span 2;
background-color: red;

grid-row: span 8;
grid-column: span 2;
background-color: blue;

它可以在全屏上正常工作，并且在大多数情况下都具有响应性，但是当我将窗口大小调整为移动设备时，会生成一个额外的小列。

https://imgur.com/a/z21uRTb

以上链接中的检查员图片。绿色块应该是红色块的两倍，我认为它们是，但它们被切断了。您还可以看到网格轮廓在最后显示一个非常小的列。为什么会发生这种情况，我以为网格只会将绿色块放在新行上。

编辑：我相信列间隙和行间隙是原因并已将其删除。不知道如何在没有意外列低于规定的最小值的情况下保持列间隙和行间隙。

【问题讨论】：

右边那个绿色的是小号？
the result 是否符合您的预期？
@Nelles 是的，是的，它在全屏时正确显示，但在移动到移动设备时显示不正确。 imgur.com/a/5NIJ9h1 。
@Chunbin Li 抱歉，我的问题不是行长问题，而是列数和大小问题。 imgur.com/a/5NIJ9h1 绿色框应该是这样的，或者更确切地说，它们应该向下移动到网格中的下一个可用位置，因为 grid-auto-flow:dense;但它只是压缩成一个小柱子。
你能发一个css和html的例子吗？

标签： javascript html css css-grid

【解决方案1】：

如果您想为每个已设置自定义大小的子列设置最小大小，您可以在父级的grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); 上使用calculated column total number 而不是auto-fit。

grid-template-columns: repeat(8, minmax(80px,1fr));

如何得到8fr的计算结果？

red 的网格列：跨度 2

蓝色的网格列：跨度 2

绿色的网格列：span 4

一行中的网格列 = 8 (2(red) + 2(blue) + 4(green))

grid-column: span 2;
background-color: red;

grid-column: span 2;
background-color: blue;

grid-column: span 4;
background-color: green;

【讨论】：