为什么 auto-fit 或 auto-fill 不能在 minmax 下正常工作？

Question

当我添加 auto-fit 或 auto-fill 而不是数字时，它无法正常工作。

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

（使用自动调整或自动填充）。我怎样才能做到这一点？

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

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

Answer 1

I recently came across this problem as well. From the specs

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list>) The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times. However, there are some restrictions:

The repeat() notation can’t be nested.

Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

After a few days of trying, it seems that any use of min-content, max-content, or auto in the repeat <track-list> will flat-out be ignored, even inside of minmax. Replacing one of them with a fixed-number works because it simply defaults to that. I did manage to create a programmatic workaround using ResizeSensor and jQuery, though.

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() sets the whole grid to a single column with size of max-content so all items will be as wide as the widest item. It then captures that width from one of the elements in the grid and recreates the columns by inserting that width (as a fixed number) into the minmax function in grid-template-columns: repeat(auto-fit....
Not sure if it's exactly what you're looking for, but I was sure happy when I figured this out :) Hope it helps.
NOTE: As I stated, this will size all columns to be the same (minimum) width as the widest element

Answer 2

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

网格规范中详细介绍了此规则。请参阅“曲目列表的语法”部分。

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

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

在解决这个问题时，我认为另一个网格规则会派上用场：

minmax(min, max)

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

如果 max < min，则 max 被忽略并被minmax(min,max)视为 min。

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

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

那么这应该有效：

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

它实际上确实解决了问题......但它也破坏了auto-fit包装功能（演示）。

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

Answer 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>