Создайте отзывчивый макет с сеткой CSS

К сожалению, у Grid нет возможности автоматически размещать элементы в макете сетки, которые мы видели в начале. К счастью для нас, однако, Grid дает нам инструменты, чтобы сделать это вручную довольно легко. В этом уроке мы будем e nth-child, чтобы разместить каждый элемент списка. На веб-сайте для производства мы советуем использовать класс, который при правильном планировании мог бы позволить автоматизировать макеты, подобные этому, на контент-тяжелом сайте.

Давайте начнем с нашего первого элемента.

  @media screen и (min-width: 40em) {
  .boxes li: nth-child (1) {
    grid-column: 1 / -1;
    строка сетки: диапазон 3;
  }
}  

. Мы будем размещать все наши стили размещения внутри этого медиа-запроса, который мы писали ранее, потому что мы хотим, чтобы этот макет произошел после того, как наш браузер равен 40 или более. С nth-child мы нацеливаем первый элемент списка. CSS Grid позволяет нам легко размещать наши элементы с помощью столбца сетки и строки сетки. Существует много разных способов указать, где должны быть элементы, но здесь мы говорим, что наш элемент начинается с строки столбца один и охватывает весь контейнер с -1.

Затем, со строкой-сеткой, мы говорим элемент, чтобы охватить три строки. Как мы узнаем, что три строки будут размером, который мы хотим? Ну, мы указали размер этих строк с помощью grid-auto-rows несколько мгновений назад, и если мы не удовлетворены ими, мы сможем изменить минимальный размер.

Давайте поместим остальные наши предметы.

  @media screen и (min-width: 40em) {
  .boxes li: nth-child (2) {
    grid-column: span 2;
    строка сетки: диапазон 7;
  }

  .boxes li: nth-child (3) {
    grid-column: span 4;
    строка сетки: диапазон 3;
  }

  .boxes li: nth-child (4) {
    grid-column: span 2;
    строка сетки: диапазон 4;
  }

  .boxes li: nth-child (5),
  .boxes li: nth-child (6) {
    grid-column: span 2;
    row-row: span 2;
  }
}  

Разве это не удивительно, насколько нам помогает контрольная сетка? Имея всего несколько строк кода, мы можем собрать полностью отзывчивый макет, который не сломается, если добавится больше элементов.

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

 . Ваш селектор {
  дисплей: flex;
}

/ * Ваш сетевой код * /
@supports (display: grid) {
  отображение: сетка;
  grid-template-columns: repeat (3, 1fr);
  сетчатый зазор: 1rem 2rem;
}