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

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.