为什么自动装配或自动填充不能与minmax一起正常使用？

时间：2018-07-30 13:21:44

标签： css css3 css-grid

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

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

enter image description here

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

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

enter image description here

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

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

enter image description here

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

* {
  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>

4 个答案:

答案 0 :(得分：1)

执行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>

enter image description here

答案 1 :(得分：1)

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

  

repeat（）语法的一般形式大约是

     

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

     

repeat（）表示法不能嵌套。

     

自动重复（auto-fill或auto-fit）不能与固有尺寸或灵活尺寸结合使用。

经过几天的尝试，似乎在重复min-content中任何使用max-content，auto或<track-list>即使在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...函数中来重新创建列。 br /> 不知道这是否正是您要寻找的东西，但是当我弄清楚这一点时，我一定很高兴：)希望对您有所帮助。 注意：正如我所说，这会将所有列的大小设置为相同（最小）宽度与最宽元素

答案 2 :(得分：0)

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

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

这就是为什么您的代码（在下面复制）无法正常工作的原因。

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

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

  

minmax(min, max)

     

定义大小范围，该范围大于或等于min且小于或   等于最大值

     

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

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

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

所以这应该起作用：

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

它确实可以解决问题……但是它也破坏了auto-fit包装功能（demo）。

我尝试过的其他方法似乎都没有效果。也许其他人可以找到解决方案。也许这是当前Grid迭代的局限性。

答案 3 :(得分：-1)

在要应用“重复”的标签上添加一些宽度（在本示例中，我在“ ul”标签上添加了“ width：100vw;”）。

* {
  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>

为要应用“重复”，“最小-最大”的标签添加一些宽度。

相关问题
最新问题