Изменить шаблон сетки в точке останова

Question

У меня есть панель с товаром, и я пытаюсь изменить шаблон сетки в точке останова 1200.

Действительно необходимо, чтобы у продукта не было площади, но есть автоматический поток.

Под точкой останова, если только имея 2 столбца 3 строки у меня есть 3 столбца с одним в маске. Я думаю, что что-то отсутствует в grid-3-2, и auto-flow не решает проблему. Я должен следовать приказу li для отображения.

Заранее спасибо за вашу помощь! вот мой код =)

.grid-3-2{
    display: grid;
    grid-template-columns: 390px 390px 390px;
    grid-template-rows: 607px 607px 260px 607px 607px;
    grid-row-gap: 61px;
    grid-column-gap: 2px;
    justify-content: center;
    margin-left: -40px;
    margin-top: 21px;
}

@media(max-width: 1200px){
    .grid-3-2{
        display: grid;
        max-width: 782px;
        grid-template-columns: 390px 390px;
        grid-template-rows: 607px 607px 607px 260px 607px 607px 607px;
        grid-row-gap: 61px;
        grid-column-gap: 2px;
        justify-content: center;
        margin-left: -40px;
        margin-top: 21px;
    }   
}

<ol class="grid-3-2">
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
</ol>

Answer 1

Я обнаружил, почему это не работает, у меня есть панель изображений, которая занимает строку. когда я удаляю это, это работа. Потому что grid-column-start: 1; grid-column-end-end: 4;

facepalm .....

Спасибо за помощь, я сделаю grid-column-start: 1; конец столбца сетки: 3;

Answer 2

Ваш код работает хорошо, как кажется. единственное, что я рекомендую использовать, это repeat(multiples, value), если все значения равны, а не записывать необходимые значения каждого элемента сетки.

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

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

.product {
  background-color: cyan;
}

.grid-3-2 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

@media(max-width: 1200px) {
  .grid-3-2 {
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(3, 50px);
  }
}

<ol class="grid-3-2">
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
</ol>