CSS Grid без медиазапросов?

Question

У меня есть простая сетка ниже, которая работает, но я ломал голову над тем, как устранить медиазапросы.Я обдумываю это, или есть более эффективный способ сделать это без медиа-запросов?

.wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1em;
    grid-auto-rows: minmax(100px, auto);
}

.wrap>div {
    padding: 1em;
    border: solid orange 1px;
}

@media (max-width: 1000px) {
    .wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

Answer 1

Нет ничего плохого или неэффективного в использовании медиа-запросов с сеткой.Вы можете избежать их в определенных сценариях (например, если у вас есть список карточек с униформой), если хотите, используя автоматическое размещение.Код будет выглядеть примерно так:

.listing {
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}

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