Принудительная установка столбца в адаптивной сетке

Question

У меня есть сетка элементов, и первый элемент охватывает строки 1 и 2 (для меню). Я бы хотел, чтобы сетка под этой областью была пустой, но поскольку я не знаю, сколько элементов будет отображаться, я использую автоподгонку, и при повторном заполнении страницы эта область заполняется.

Полагаю, я мог бы создать оболочку с display flex, а затем отделить элемент поиска от элементов сетки, но мне было бы интересно узнать, как заставить определенные области быть пустыми, когда сетка реагирует. Я бы сказал, что с вероятностью 95% я делаю что-то не так, но я плохо разбираюсь в сетке и не могу найти ответ

.grid {
  display: grid;
  grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  grid-auto-rows: 10rem;
  grid-template-areas: "search" "search";
  width: 95%;
  margin: 0 auto;
}

.search {
  grid-area: search;
}

.item {
  display: flex;
  padding: 1rem;
  justify-content: center;
  background: lightblue;
}

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

Answer 1

Трюк состоит в том, чтобы сделать первый элемент, охватывающий весь первый столбец, определив большое количество строк, но вы должны внести небольшие изменения в определение сетки, чтобы добиться этого, например, удалить вертикальный пробел и 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>

---

Не относится к вопросу, но добавление position:sticky делает макет более интересным:

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