Question

我正在为新的响应式布局测试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

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid>* {
  align-text: center;
  background-color: lightgreen;
  height: 200px;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

Answer 2

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

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

使用CSS网格将多个不同宽度的列包裹起来？

2 个答案: