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

Question

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

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

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

正如预期的那样，制作 5 个均匀间隔且响应迅速的网格单元。问题是我希望纽扣单元比标题小得多。所以我想要8fr 1fr 1fr 1fr而不是1fr 1fr 1fr 1fr 1fr。如何在保持使用重复自动调整的包装/响应属性的同时做到这一点？

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

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

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

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

Answer 1

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

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

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