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

Несимметричная сетка Grid Layout и её практическое использование

Несимметричная сетка Grid Layout и её практическое использование

Учимся верстать на Grid Layout. Если ещё не знаком с ним, пора бы это уже исправить.

По данным портала «Can I Use», 84% браузеров уже поддерживают этот метод вёрстки и это число растёт, а значит и растёт потребность изучать новые технологии.

В качестве «подопытного кролика» будет выступать галерея кадров из фильмов с сайта Кинопоиск. Изначально она создана с помощью относительного позиционирования, именно её мы и будем улучшать и делать адаптивной под различные разрешения экранов, чтобы галерея отлично смотрелась на любом устройстве.

Несимметричная сетка Grid Layout и её практическое использование

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

<div class="container">
  <div class="photo photo1"></div>
  <!-- Остальные элементы -->
  <div class="photo photo20"></div>
</div>

Родительский контейнер будет как грид-контейнер в клеточку, где каждая клетка будет квадратом размером 75x75 px и отступом в 5px.

Далее создаём несимметричную сетку из всех блоков, делается это указав начальную и конечную координату треков (полосы между ними).

.photo1 {
  /* от какой строки */
  grid-row-start: 1;
  /* до какой строки */
  grid-row-end: 3;
  /* от какого столбца */
  grid-column-start: 1;
  /* до какого столбца */
  grid-column-end: 3;
}

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

.photo1 {
  grid-area: 1 / 1 / span 2 / span 2;
}

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

.photo {
  background-size: cover;
}

.photo1 {
  background-image: url(...);
}

Наглядная нумерация треков. Их можно считать их с конца, только перед значением нужно не забыть указать минус.

/* (75px + 5px) * 13 columns = 1040px */
@media (max-width: 1040px) {
  .container {
    grid: repeat(5, 75px) / repeat(10, 75px);
  }

  /* Здесь будет новое определение позиций для остальных элементов */

  .photo20 {
    grid-area: 4 / 9 / span 2 / span 2;
  }
}

На самом последнем брейкпоинте все наши изображения будут одного размера, а, значит будут занимать ровно одну клетку. Для реализации такого поведения мы переопределим количество элементов в контейнере на 20 и установим классу photo (данный класс имеется у каждого изображения) свойство grid-area на значение по умолчанию — auto. Тем самым, мы сбросили параметры, заданные в предыдущем брейкпоинте. Теперь наши блоки автоматически распределяются по клеткам слева направо.

/* (75px + 5px) * 10 columns = 800px */
@media (max-width: 800px) {
  .container {
    grid: repeat(4, 75px) / repeat(5, 75px);
  }

  .photo {
    grid-area: auto / auto;
  }
}

Grid Layout очень гибок и прост в обучении, немного практики и он будет не тяжелее относительного и/или абсолютного позиционирования. В этом мануале не использовались все возможности модуля, но для затравки очень даже не плохо. И как только ты будешь готов использовать, не обращая внимания, что он не поддерживается 16% браузеров, на полную мощность в своих проектах.

Ну и конечно же итоговый результат:


Комментарии 0

Вверх
Войти на сайт
или

Восстановить пароль Регистрация