Use CSS grid to make multiple different-width columns wrap?

Question

I am testing CSS grid for my new responsive layout, but I am having a problem with wrapping.

I have a nav bar with a header that should be pushed to the left and 4 buttons that should be pushed to the right. The problem right now is that using:

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

Makes, as expected 5 evenly spaced and responsive grid cells. The problem is that I want the button cells to be significantly smaller than the header. So instead of it being 1fr 1fr 1fr 1fr 1fr, I want 8fr 1fr 1fr 1fr. How can I do this while still keeping the wrapping/responsive properties of using repeat autofit?

Codepen example illustrating the problem: 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>

Answer 1

You can tell the first grid item to span 8 columns:

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

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