使用 CSS 网格使多个不同宽度的列换行？答案

【问题标题】：Use CSS grid to make multiple different-width columns wrap?使用 CSS 网格使多个不同宽度的列换行？
【发布时间】：2018-01-29 16:15:51
【问题描述】：

我正在为我的新响应式布局测试 CSS 网格，但我遇到了换行问题。

我有一个导航栏，其标题应向左推，4 个按钮应向右推。现在的问题是使用：

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

按预期制作 5 个均匀分布且响应迅速的网格单元。问题是我希望纽扣电池明显小于标题。所以不是 1fr 1fr 1fr 1fr 1fr，我想要 8fr 1fr 1fr 1fr。如何在保持使用重复自动调整的包装/响应属性的同时做到这一点？

说明问题的 Codepen 示例：https://codepen.io/johnpyp/pen/ZJxdYK

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

.grid>* {
  align-text: center;
  background-color: lightgreen;
  height: 200px;
}

<div class="grid">
  <div>I want this to be 8fr, but it is 1fr like the rest.</div>
  <div>1fr</div>
  <div>1fr</div>
  <div>1fr</div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 8fr 1fr 1fr 1fr;
}

https://css-tricks.com/snippets/css/complete-guide-grid/#fr-unit

【讨论】：

这不起作用，因为内容在达到最小宽度时不会换行。

【解决方案2】：

您可以告诉第一个网格项跨越 8 列：

.grid > div:first-child {
  grid-column: span 8;
}

https://codepen.io/anon/pen/JyLQRB?editors=1100

【讨论】：

我现在很困惑，因为当 minmax 设置为 100px 时，该解决方案适用，100px 将无法响应，因为它不能像 iPhone 上那样缩小到 320px，最小为 800px。为了解决这个问题，我尝试将 minmax 设置为 40px（320 / 8，因此它至少可以一次在屏幕上容纳 8 列）并且换行失败！你能解释为什么会这样吗？也许是一个解决方案？示例：codepen.io/johnpyp/pen/ZJxdYK
有趣的是，如果您专门缩小浏览器窗口，则不会，但是在我的网站上托管代码后，我可以确认它在移动设备上可以正常工作！非常感谢。
另外，是否可以为每个元素设置单独的最小宽度？
我想你可以尝试通过单独定位单个项目来调整它们的大小，就像我对第一个项目所做的那样。