网格模板列，最少 2 个或自动

【问题标题】：grid-template-columns, 2 minimum or auto网格模板列，最少 2 个或自动
【发布时间】：2022-08-17 17:48:08
【问题描述】：

grid-template-columns 是否可以定义至少 2 列 200px 或 auto 如果孩子的数量太大？我发现只有一种方法来定义数字或初始列。

    ul.menu {
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows:auto; 
        grid-gap: 1px;
        overflow: hidden;
    } 

    li {
        width: 200px;
        height: 200px;
    }

标签： html css

【解决方案1】：

也许您可以使用 minmax() 函数实现类似的效果。

有关包含大量示例的详细文章，请查看 here

【讨论】：

【解决方案2】：

这条线对你很重要：

grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );

    ol.menu {
      display: grid;
      grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
      list-style-position: inside;
      padding: 0;
    } 

    li {
      border: 1px solid grey;
    }

<ol class="menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

【讨论】：