Сетка CSS не растягивается до 100% на маленьких экранах

Question

У меня есть макет страницы с двумя столбцами: боковой панелью и остальным содержимым страницы.Боковая панель должна иметь ширину 300 пикселей, в то время как остальная часть содержимого должна заполнять то, что осталось.Я использовал CSS grid для этого и grid-template-columns: 300px auto (и даже пробовал grid-template-columns: 300px 1fr).И это работает на больших экранах.Но на экранах размером с планшет контент не растягивается до 100% / не заполняет то, что осталось.И я не уверен, что не так.

Вот мой набросок кода:

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Есть ли что-то, что я делаю неправильно, и есть ли способ, которым я мог бы сделать это по-другому с сеткой CSS, чтобы избежать этой проблемы?Спасибо!

Answer 1

Вы всегда можете использовать функцию calc, используя более старые поплавки и настройку ширины.Это, безусловно, работает для всех видов устройств.

.container {
  display: inline-block;
  width: 100%;
}

.sidebar {
  float: left;
  display: inline-block;
  max-width: 300px;
  width: 100%;
  height: 100vh;
  background: green;
}

.content {
  float: left;
  display: inline-block;
  width: calc(100% - 300px);
  height: 100vh;
  background: gray;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Answer 2

проблема возникает из-за фиксированной ширины столбца 300px.Вы можете использовать медиа-запрос и назначить grid-template-columns для auto с фиксированной шириной экрана и ниже.Например, для любого размера экрана 600px или меньше, ширина автоматически переходит на весь экран.

CSS

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: auto;
  }
}

https://jsfiddle.net/dxefc73o/