Как создать галерею изображений с помощью CSS Grid

Как создать галерею изображений с помощью CSS Grid

От автора: галереи изображений на таких сайтах, как Unsplash , Pinterest и т.д., созданы с помощью методов позиционирования или перевода элемента изображения, которые являются очень сложными. Вы можете достичь того же очень быстро, зная, как делается в CSS Grid галерея.

Например: Вверху находится галерея изображений с изображениями различной ширины и высоты, которая идеально подходит для CSS-сеток. Давайте приступим!

Базовая сетка

Теперь давайте создадим сетку 8×8. Мы можем также использовать сетку других размеров, но это зависит от типа галереи, которая вам нужна. В нашем случае сетка 8х8 будет идеальной.

Контейнер сетки определяется путем установки для свойства элемента display значения grid. Таким образом, div с классом grid будет нашим контейнером сетки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы используем свойство grid-template-columns для установки треков колонок и grid-template-row для установки треков рядов. Мы объявляем эти свойства для контейнера сетки. В нашем примере мы создадим контейнер размером 8×8.

grid-gap: определяет размер зазора между рядами и колонками в сетке. Значение для зазора может выражаться любой единицей длины CSS. В нашем примере я использовал значение 15px, чтобы наша сетка выглядела лучше.

Примечание. Высота рядов привязана к ширине области просмотра, поэтому ячейки прекрасно сохраняют пропорции. У нас есть 8 рядов, каждый из которых имеет высоту 5% от высоты области просмотра. Я экспериментировал с этими значениями и пришел к выводу, что 5% от ширины окна просмотра является идеальным размером. Мы устанавливаем высоту ряда в 5vw.

Сетка CSS 8×8 (8 треков колонок и 8 треков рядов) с линиями сетки от 1 до 9 (и для колонок, и для рядов)

Примечание: Все прямые потомки grid автоматически становятся элементами сетки.

Вставка элементов сетки

Теперь мы будем вставлять элементы сетки внутри контейнера сетки:

Установив для object-fit значение cover, как задаем размер фонового изображения таким образом, чтобы покрывать элемент. Мы делаем это, чтобы изображение могло заполнять высоту и ширину своего блока (элемента сетки), сохраняя его соотношение сторон.

Примечание. Свойство object-fit работает только в том случае, если мы устанавливаем свойства width и height.

Примечание. По умолчанию элементы сетки располагаются в соответствии с правилами автоматического размещения сетки.

Расположение элементов сетки

Прежде чем мы начнем позиционировать элементы сетки, мы рассмотрим несколько основных концепций.

div grid является контейнером сетки, а все его прямые дочерние элементы являются элементами сетки. Когда мы определили треки сетки с помощью grid-template-columns и grid-template-rows, grid предоставила нам пронумерованные линии, называемые линиями сетки, их можно использовать для позиционирования элементов. Вы можете ссылаться на каждую линию сетки с помощью числового индекса.

Колонки начинаются с первой слева направо по умолчанию, а ряды также начинаются с первого — сверху вниз. Для создания одной колонки или ряда требуется две линии сетки, по одной линии с каждой стороны, поэтому наша сетка 8 на 8 строк состоит из 9 линий колонок и 9 линий рядов.

Вертикальные линии 1 и 2 определяют начальную и конечную точки первой колонки. Линии 2 и 3 — второй колонки, и так далее. Аналогично, горизонтальные линии 1 и 2 определяют положение первого ряда, а линии 2 и 3 — второго ряда и так далее. Знание вышеуказанных концепций поможет вам понять, как мы собираемся размещать элементы (изображения) в сетке.

Теперь мы будем использовать номера линий сетки для управления размещением элементов, применяя свойства непосредственно к элементу сетки. Мы можем указать, на какой строке элемент сетки начинается и заканчивается, и на сколько треков он должен распространяться.

Первый элемент сетки

Итак, давайте создадим новое правило, которое предназначается для первого элемента сетки. Сначала мы будем использовать свойство grid-column-start, чтобы указать линию колонки сетки, с которой начинается первый элемент сетки. grid-column-end указывает, где первый элемент сетки заканчивается.

Таким образом, начальное значение grid-column-start — это число, обозначающее линию сетки у левого края колонки. Значение grid-column-end указывает линию сетки, которая отмечает правый край колонки.

Таким образом, в приведенном ниже примере 1 для grid-column-start и 3 для grid-column-end означают, что элемент сетки будет распространяться от левого края линии сетки, строки 1 до строки 3, заполняя 2 колонки. Мы также используем свойства grid-row-start и grid-row-end, чтобы указать начало элемента сетки и конечную позицию для линии ряда сетки таким же образом, как мы это делали для колонки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Размещение первого элемента

vПримечание. Теперь мы разместим другие элементы в соответствии с теми же принципами.

2-й элемент сетки

Размещение второго элемента

3-й элемент сетки

Размещение третьего элемента

4-й элемент сетки

Размещение четвертого элемента

5-й элемент сетки

Размещение пятого элемента сетки

6-й элемент сетки

Размещение шестого элемента

Полный код приведен ниже.

Вы можете попробовать добавить собственный CSS, чтобы эта галерея выглядела так, как вам нужно. Вы также можете очень легко создавать более сложные галереи изображений. Я надеюсь, вы нашли этот пост информативным и полезным. Буду рад услышать ваши отзывы!

Автор: Abhishek Jakhar

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий