为什么自动调整或自动填充不能与 minmax 一起正常工作？答案

【问题标题】：Why auto-fit or auto-fill not working properly with minmax?为什么自动调整或自动填充不能与 minmax 一起正常工作？
【发布时间】：2019-01-06 18:18:49
【问题描述】：

当我添加自动调整或自动填充而不是数字时，它无法正常工作。

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

但是当我添加数字而不是最大内容时它可以正常工作。

grid-template-columns: repeat(auto-fit, minmax(50px, max-content));

但我希望网格的大小与内容的大小相同（适合）。像这样：

grid-template-columns: repeat(30, minmax(max-content, max-content));

（使用自动调整或自动填充）。我该怎么做？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));
 grid-gap: 10px;
}

li {
  list-style: none;
}

<body>
    <nav>
      <ul>
        <li>lorem ipsum</li>
        <li>dolor sit</li>
        <li>amet</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
      </ul>
    </nav>
  </body>

【问题讨论】：

只是因为这不是 CSS-Grid 支持的选项。至少其中一个“值”必须是数字。这就是规范 - drafts.csswg.org/css-grid/#propdef-grid-template-columns

标签： css css-grid

【解决方案1】：

我最近也遇到了这个问题。来自specs

repeat() 语法的一般形式大约是，

重复（[ <positive-integer> | auto-fill | auto-fit ]，<track-list>）第一个参数指定重复次数。第二个参数是一个曲目列表，它会重复该次数。但是，有一些限制：

repeat() 表示法不能嵌套。

自动重复（auto-fill 或 auto-fit）不能与固有或灵活大小组合。

经过几天的尝试，似乎在重复 <track-list> 中任何使用 min-content、max-content 或 auto 都会被完全忽略，即使是在内部的minmax。用固定数字替换其中一个是可行的，因为它只是默认设置。不过，我确实设法使用ResizeSensor 和jQuery 创建了一个程序化解决方法。

var GRID_GAP = 3; // GRID-GAP of the grid
var iGridW = 0; // LAST comparative value of grid item width
var sizingWIP = false;
var GRID_LAYOUT = {
  'maxwidth': { /* CSS settings to compare item widths */
    display: "grid",
    gap: GRID_GAP + "px",
    "grid-template-columns": "none",
    "grid-auto-columns": "max-content"
  },
  'normal': { /* Normal CSS style to display the grid */
    display: "grid",
    gap: GRID_GAP + "px",
    "grid-template-columns": "repeat(auto-fit, minmax(" + iGridW + "px, 1fr)",
    "grid-auto-columns": "none"
  }
};

$(function() { // Shorthand for document.ready event
  evalGridItemMaxSize();
};

new ResizeSensor(document.getElementById("grdContainer"), function() {
  if(sizingWIP) return;
  sizingWIP = true;
  evalGridItemMaxSize();
  sizingWIP = false;
});


// EVALUATE GRID ITEM WIDTH TO MAX-CONTENT FOR *ALL* COLUMNS (equivalent to "grid-template-columns: repeat(auto-fit, max-content)" which *cannot* be set in CSS
//    (repeat(auto-fill... & repeat(auto-fit... *cannot* be used with intrinsic {min-content, max-content, auto})
function evalGridItemMaxSize() {
  $("#grdSelector").css(GRID_LAYOUT['maxwidth']);
  if ($("#someGridItemID").outerWidth() === iGridW) {
    $("#grdSelector").css(GRID_LAYOUT['normal']);
    return; //Exit if grid item max-width is same as last time
  }

  // Re-evaluate grid item width as a function of max-content of *all* items
  iGridW = $("#someGridItemID").outerWidth();
  GRID_LAYOUT['normal']['grid-template-columns'] = "repeat(auto-fit, minmax(" + iGridW + "px, 1fr)"
  $("#grdSelector").css(GRID_LAYOUT['normal']);
}

<script src="https://raw.githubusercontent.com/procurios/ResizeSensor/master/dist/resizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="grdContainer">
  <div class="grid-container" id="grdSelector">
    <!-- GRID ITEMS GO HERE -->
  </div>
</div>

evalGridItemMaxSize() 将整个网格设置为单个列，大小为max-content，因此所有项目都将与最宽的项目一样宽。然后它从网格中的一个元素中捕获该宽度，并通过将该宽度（作为一个固定数字）插入到minmax 函数grid-template-columns: repeat(auto-fit... 中来重新创建列。
不确定它是否正是您要找的东西，但当我发现这一点时我很高兴:) 希望它有所帮助。
注意：正如我所说，这将使所有列的大小相同（最小值）作为最宽元素的宽度

【讨论】：

【解决方案2】：

minmax() 函数中的两个参数中的至少一个必须是固定长度（例如，px、em、%）。

此规则在 Grid 规范中有详细说明。请参阅“The syntax of a track list”部分。

这就是您的代码（复制在下面）不起作用的原因。

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

在解决问题时，我认为这条其他网格规则会派上用场：

minmax(min, max)

定义大于或等于 min 且小于 or 的大小范围等于最大值。

如果 max minmax(min,max) 视为 min。

查看最后一行，如果 max 小于 min，则以 min 为准。

查看第一条规则，至少一个参数必须是固定长度。

那么这应该可以工作：

grid-template-columns: repeat(auto-fit, minmax(min-content, 1px));

它确实解决了问题...但它也破坏了auto-fit 包装功能 (demo)。

我尝试过的其他方法似乎都不起作用。也许其他人可以找到解决方案。或者这可能是当前 Grid 迭代的一个限制。

【讨论】：

知道如何解决换行问题吗？

【解决方案3】：

做repeat(auto-fit, minmax(min-content, 0))

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
 display: grid;
 width:50px;
 grid-template-columns: repeat(auto-fit, minmax(min-content, 0));
 grid-gap: 10px;
}

li {
  list-style: none;
}

<body>
    <nav>
      <ul>
        <li>lorem ipsum</li>
        <li>dolor sit</li>
        <li>amet</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
      </ul>
    </nav>
  </body>

【讨论】：

这并不能解决 OP 的问题。删除 forced 宽度并查看。元素不换行。

【解决方案4】：

添加一些宽度（在本例中，我将 'width: 100vw;' 添加到 'ul' 标记）到您想要应用“重复”的标记。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
 width: 100vw;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
 grid-gap: 10px;
}

li {
  list-style: none;
}

<body>
    <nav>
      <ul>
        <li>lorem ipsum</li>
        <li>dolor sit</li>
        <li>amet</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
      </ul>
    </nav>
  </body>

为您希望应用“重复”、“最小-最大”的标签添加一些宽度。

【讨论】：