Forcing a column to be empty in a responsive grid layout

Question

I\'ve a grid of items and the first item spans rows 1 and 2 (for a menu). I\'d like to keep the grid under this area empty, but because I don\'t know how many items will be

Answer 1

On trick is to make the first element to span all the first column by defining a big number of rows but you have to do slight changes to the grid definition in order to achieve this like removing the vertical gap and the grid-auto-rows

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-column-gap: 1rem; /* Only column gap here */
  width: 95%;
  margin: 0 auto;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
  height:10rem; /*to replace the auto-row*/
  margin-bottom:1rem; /* To replace the gap*/
}


.search {
  grid-column: 1;
  grid-row: 1/300; /* big number here */
  height:calc(2*10rem + 1rem); /* consider one gap in the total height*/
}

* {
  box-sizing:border-box;
}

<div class="grid">
  <div class="item item-1 search">Search</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
  <div class="item item-7">Item 7</div>
  <div class="item item-8">Item 8</div>
  <div class="item item-9">Item 9</div>
</div>

---

Not relevant to the question but adding position:sticky make the layout more intresting:

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-column-gap: 1rem; /* Only column gap here */
  width: 95%;
  margin: 0 auto;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
  height:10rem; /*to replace the auto-row*/
  margin-bottom:1rem; /* To replace the gap*/
}


.search {
  grid-column: 1;
  grid-row: 1/300; /* big number here */
  height:calc(2*10rem + 1rem); /* consider one gap in the total height*/
  position:sticky;
  top:0;
}

* {
  box-sizing:border-box;
}

<div class="grid">
  <div class="item item-1 search">Search</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
  <div class="item item-7">Item 7</div>
  <div class="item item-8">Item 8</div>
  <div class="item item-9">Item 9</div>
</div>