CSS Grid - переход с 1 строки, 3 строки на 3 строки, 1 строка

Question

Я изучаю CSS Grid, чтобы выяснить, может ли он полностью заменить необходимость отзывчивых медиазапросов CSS для моего конкретного варианта использования.У меня есть следующий контейнер сетки:

.gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 0px 15px;
    margin: 0 auto;
    grid-row-gap: 20px;
}

Контейнер сетки содержит три элемента, которые изначально приводят к одной строке и трем столбцам на экранах большего размера:

Когда я уменьшу ширину области просмотра так, чтобы три столбца были меньше 250 пикселей в каждом, я бы хотел, чтобы макет сетки привязывался к макету из трех строк и одного столбца:

Поскольку вы уменьшаете ширину области просмотра, в настоящее время существует промежуточный макет, в котором третий элемент переносится в строку, где он находится сам по себе, из-за выбранного алгоритма автоматического размещения:

Я хотел бы обойти эту упаковку и поддерживать только начальную разметку в одну строку, три столбца и окончательную разметку в три строки, одну колонку,Это возможно только с помощью CSS Grid и без использования медиазапросов?

Answer 1

Вы можете использовать медиазапрос и превратить ваш контейнер в сетку, как только будет достигнута минимальная ширина: (опция кода используется, поскольку вы дали так мало информации)

базовый пример идеи

div {
  padding: 1em;
  margin: 1em;
  border: dotted tomato;
}

@media (min-width: 780px) {
  body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 0px 15px;
    margin: 0 auto;
    grid-row-gap: 20px;
  }
}

<div>lorem</div>
<div>lorem</div>
<div>lorem</div>

Вы можете воспроизвести фрагмент в режиме полной страницы и изменить размер браузера, чтобы проверить поведение.

Answer 2

Функции автоподбора или автозаполнения заполняют доступное пространство максимальным количеством столбцов.

Вы можете решить проблему с помощью выражений мультимедиа, изменив количество столбцов с требуемым разрешением..

Результат

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  padding: 0px 15px;
  margin: 0 auto;
  grid-row-gap: 20px;
  list-style: none;
}

.item {
  border: 1px dashed red;
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

<ul class="grid">
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
  <li class="item">
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nihil neque quas corrupti eaque in iure totam reiciendis praesentium. Sapiente impedit magni consequatur modi error eaque vel tempore consequuntur saepe.</p>
  </li>
</ul>

И тот же код на CodePen