CSS Grid：使用 grid-column-start/end 时的自动调整行为类似于自动填充答案

【问题标题】：CSS Grid: Auto-fit behaving like Auto-fill when using grid-column-start/endCSS Grid：使用 grid-column-start/end 时的自动调整行为类似于自动填充
【发布时间】：2018-11-15 05:55:00
【问题描述】：

当谈到 CSS 网格时，我遇到了一些困惑。我将网格模板列设置为自动调整，效果很好。除了在 div5 上设置 column-start/end 之外，我开始获得自动填充行为，而不是在创建多个空白单元格的地方。似乎我的 minmax 函数的 max 1fr 没有发挥作用。

我在这里遗漏了什么明显的东西吗？

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

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

下面的图片显示了增加/减小显示自动填充行为的窗口大小。

根据要求添加了代码片段您必须确保以全屏模式运行它并水平增加屏幕尺寸才能看到问题。

/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

<!DOCTYPE HTML>
<html>

<body>
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
</body>

</html>

【问题讨论】：

能否提供更多代码或提供sn-p？
@Bryner 您是否希望前 4 项始终填充第一行，最后一项始终填充第二行...像这样吗？codepen.io/danield770/pen/mKEqyo
@Danield 是的！那很完美！所以我想重复是导致问题的原因？我试图理解为什么会这样。我的猜测是重复也会影响 div5 并且因为 div5 总是占据整个屏幕，所以重复认为有更多可用的项目并保持 div5 自动适应新列或什么？我不知道..我很困惑，但是是的，您的解决方案正是我想要的。谢谢！

标签： css grid css-grid

【解决方案1】：

您希望前 4 项始终填充第一行，最后一项始终填充第二行。

这意味着您需要一个 4 列网格，其中最后一项跨越所有 4 列。

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: aqua     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>

原代码的问题：

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

是它使用了auto-fit，它适用于列数不固定的响应式布局网格，而是网格根据网格内容和布局方法创建新列。

这显然不是你需要的。

【讨论】：