Адаптивный макет с 3 элементами в строке на больших экранах и 1 элементом в строке на меньших экранах

#css #layout #responsive-design

#css #макет #адаптивный дизайн

Вопрос:

Я хочу разместить 3 элемента одинаковой ширины в одной строке на больших экранах, растягивая элементы, чтобы заполнить доступное пространство.

Однако, когда элементы имеют ширину менее 200 пикселей, я хочу отобразить их все в одном столбце.

Я никогда не хочу иметь 2 элемента в строке. Приемлемо любое простое CSS-решение, такое как CSS flexbox или CSS grid.

Следующий код неверен, потому что иногда он показывает 2 элемента в строке.

 .item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

 <div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Развернуть фрагмент

Ответ №1:

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;

}
        
.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

        
@media (max-width: 992px) {
    .container {  grid-template-columns: auto;}
}

 <div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Развернуть фрагмент

1. Я думаю, это невозможно сделать без запроса @media?

2. Просто дополнительное примечание: я расширял gravity forms на WordPress, и каждый столбец item также должен быть grid-column: auto; в css.

Ответ №2:

 .item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template: 1fr 1fr 1fr / repeat(200px, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.grids {
  background-color: red;
}

 <div class="grids">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Развернуть фрагмент