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

  
Search
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6
  
Item 7
  
Item 8
  
Item 9

---

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

  
Search
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6
  
Item 7
  
Item 8
  
Item 9