Учимся создавать макет Masonry-галереи, используя чистый CSS

Учимся создавать макет Masonry-галереи, используя чистый CSS

От автора: сегодня я собираюсь показать вам, как вы можете построить сложную Masonry-сетку, используя CSS Grid. CSS Grid изменил способ разработки наших макетов, и мы собираемся создать интересный проект, используя его возможности.

Вот как будет выглядеть наш макет в конце статьи:

Учимся создавать макет Masonry-галереи, используя чистый CSS

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

Что нужно помнить, прежде чем мы начнем строить сетку

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

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

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

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

Ячейка определяется количеством рядов (высотой) и количеством колонок (шириной), которые она охватывает.

Наименьший размер ячейки будет определять, насколько сложной будет сетка.

Рассчитайте количество колонок и столбцов основе самой маленькой ячейки

Давайте начнем

Давайте сначала создадим простой HTML-файл, который в конечном итоге будет содержать нашу сетку. Вы можете создать ветку базового проекта с GitHub. Давайте теперь рассмотрим основные объявления.

Для удобства чтения мы будем рассматривать только код внутри тега body.

Первый фрагмент кода содержит базовый сброс CSS и определяет для селектора .masonry отображение в качестве grid. Второй фрагмент кода содержит объект section, который будет действовать как сетка и в конечном итоге будет содержать все элементы сетки.

Давайте отметим пару вещей.

1. Мы установили для height и width сетки 100vh и 100vw соответственно, поэтому наша сетка занимает весь доступный размер экрана. Вы можете настроить это по своему усмотрению.

2. Объявление колонок / рядов сетки: grid-template-columns: repeat(16, 1fr) — это определяет, сколько колонок будет содержать сетка. Функция repeat позволяет нам создавать несколько колонок (16 в нашем случае) с одинаковым размером. 1fr означает, что у каждой из 16 колонок будет 1 часть (fr) доступной ширины.

То же самое касается grid-template-row: repeat(14, 1fr). Итак, теперь у нас есть сетка с 16 колонками и 14 рядами. Вы можете изменить это в соответствии со своими потребностями.

3. В HTML-файле у нас есть только одна ячейка сетки, элемент figure. Мы вложили тег img в тег figure. Подробнее об этом позже.

Учимся создавать макет Masonry-галереи, используя чистый CSS

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

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

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

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

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

Добавление вышеуказанных стилей к настройкам img изображений приводит их в соответствие с границами ячейки.

Учимся создавать макет Masonry-галереи, используя чистый CSS

Наконец, давайте разместим ячейки сетки

Определение колонок и рядов сетки дало нам доступ к трекам сетки (колонок и столбцов), которые мы теперь можем использовать, чтобы охватить ячейку так, как нам нужно.

Вы можете визуализировать это лучше с помощью инспектора CSS Grid. Его можно включить, используя этот документ Mozilla.

Учимся создавать макет Masonry-галереи, используя чистый CSS

Как видите, треки колонок охватывают от 1 по 17, что дает нам 16 колонок. Точно так же треки рядов сетки охватывают с 1 по 15, что дает нам 14 рядов. Давайте разместим первую ячейку сетки.

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

Давайте сначала рассмотрим свойство grid-column. Мы задаем для него два значения. Первое свойство определяет трек столбца, с которого ячейка должна начинаться, а второе — конец. То же самое касается свойства grid-row.

Учимся создавать макет Masonry-галереи, используя чистый CSS

Теперь ячейка занимает пять колонок в ширину и пять рядов в высоту. Есть много различных способов задать значения grid-column и grid-row.

Точно так же мы можем расположить остальные ячейки. Вы можете заняться этим самостоятельно. Для краткости я включаю готовый код, который написал для создания masonry-галереи, показанной в начале.

Учимся создавать макет Masonry-галереи, используя чистый CSS

Вот так выглядит макет сейчас. Имея современные знания, вы можете создавать еще более сложные сетки. Это был только пример, иллюстрирующий основы CSS-сетки.

Вы можете найти репо для этого проекта на GitHub. Если у вас есть какие-либо вопросы, напишите в комментариях. Это все, ребята.

Автор: Shivam Kaushik

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

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

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