<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Negative line numbers and the implicit grid</h1>
      <figure class="callout">

        <p>The sidebar is set to <code>grid-row: 1 / -1;</code> as the row tracks are in the implicit grid it cannot stretch to the final line.</p>
      </figure>
      <div class="container" id="container">
        <div class="box sb bg-primary color-light">Sidebar</div>
        <div class="box">Item one</div>
        <div class="box">Item two</div>
        <div class="box">Item three has more text </div>
        <div class="box">Item four</div>
        <div class="box">Item five</div>
      </div>
    </article>
  </div>
</main>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 10px;
  background-color: #dadce0;
  padding: .5em;
  border-radius: 3px;
  max-width: 1200px;
}

.container > .sb {
  grid-row: 1 / -1;
}