CSS сетка с полной шириной строки

Question

Я пытаюсь создать шаблон с 2 столбцами, который преобразуется в 1 столбец для устройств с более низким разрешением.Это то, что я сделал до сих пор

<div class='wrapper'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 800px));
  grid-gap: 30px;
}


.item {
  height: 40px;
  background-color: blue;
  border: 1px solid black;
  margin: 10px;
}

https://codepen.io/anon/pen/VJZeeX Когда я уменьшаю разрешение, оно изменяется на один столбец, но с правой стороны остается так много места.Я бы хотел, чтобы элементы .item занимали все доступное пространство.плюс я бы хотел избежать использования запроса @media.Я думал, может быть, я должен как-то объединить CSS-сетку с flexbox?Но не совсем уверен, приведет ли это куда-нибудь.Спасибо

Answer 1

Это должен быть лучший выстрел.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 30px;

}


.item {
  height: 40px;
  background-color: blue;
  border: 1px solid black;
  margin: 10px;
}