为什么自动装配或自动填充不能与minmax一起正常工作？ [英] Why auto-fit or auto-fill not working properly with minmax?
问题描述
当我添加自动调整或自动填充而不是数字时，它无法正常工作。
It doesn't work properly when I add auto-fit or auto-fill instead of a number.
grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));
但是当我添加数字而不是最大内容时，它可以正常工作。
But it works properly when I add number instead of max-content.
grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
但是我希望网格的大小与内容的大小相同（合适）。像这样：
But I want the size of the grid to be the same(be fit) as the size of the content. Like this:
grid-template-columns: repeat(30, minmax(max-content, max-content));
（使用自动调整或自动填充）。我该怎么办？
(using auto-fit or auto-fill). How can I do that?
* {
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>
推荐答案
<我最近也遇到了这个问题。从规格
repeat（）语法的一般形式大约是
The generic form of the repeat() syntax is, approximately,
repeat（ [< positive -integer> |自动填充|自动拟合] ，< track-list> ）
第一个参数指定数字重复。第二个参数是一个跟踪列表，重复该次数。但是，有一些限制：
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:
不能嵌套repeat（）表示法。
The repeat() notation can’t be nested.
自动重复（自动填充或自动适应）不能与固有尺寸或灵活尺寸结合使用。
Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.
经过几天的尝试，似乎任何使用最小内容，最大内容或自动，重复< track-list> 将被忽略，即使在 minmax 内部。用固定数字替换其中一个是可行的，因为它只是默认设置。
我确实设法使用 ResizeSensor 和 jQuery 。
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（）将整个网格设置为单个列，其大小为 max-content ，因此所有项目都将与最宽项目一样宽。然后，它从网格中的一个元素中捕获该宽度，并通过插入该宽度（作为固定数字来重新创建列）放入 minmax 。 grid-template-columns中的函数：repeat（auto-fit ...
不知道它到底是什么您正在寻找，但是当我弄清楚这一点时，我一定很高兴:)希望能帮到您。
注意：正如我所说，这会将所有列的大小设置为相同（最小）宽度为最宽的元素
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
这篇关于为什么自动装配或自动填充不能与minmax一起正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
