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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

123456789101112131415161718192021222324* {  margin: 0;  padding: 0;  box-sizing: inherit;} body {  box-sizing: border-box;  font-size: 62.5%;} .masonry {  background-color: white;  width: 100vw;  height: 100vh;  padding: 1rem;   display: grid;  grid-template-columns: repeat(16, 1fr);  grid-template-rows: repeat(14, 1fr);   row-gap: 1rem;  column-gap: 1rem;}

1234567<section class=”masonry”>  <figure class=”cell cell–1″>    <img      src=”https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80″      alt=”Food picture 1″>  </figure></section>

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

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

READ
3 способа заменить все вхождения строки в JavaScript

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

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 будет выступать в качестве ячейки сетки, и мы можем установить настройку изображение внутри него.

CSS

1234567img {  display: block;  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 5px;}

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

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

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

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

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

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

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

READ
Только 3% россиян используют доступ к интернету для дистанционного обучения

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

CSS

1234.cell–1 {     grid-column: 1 / 6;     grid-row: 1 / 6; }

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

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

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

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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<section class=”masonry”>      <figure class=”cell cell–1″>        <img          src=”https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80″          alt=”Food picture 1″>      </figure>      <figure class=”cell cell–2″>        <img          src=”https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>      <figure class=”cell cell–3″>        <img          src=”https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80″          alt=”Food picture 1″>      </figure>      <figure class=”cell cell–4″>        <img          src=”https://images.unsplash.com/photo-1514852451047-f8e1d1cd9b64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1112&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–5″>        <img          src=”https://images.unsplash.com/photo-1514997618358-2c490d913b78?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–6″>        <img          src=”https://images.unsplash.com/photo-1514056052883-d017fddd0426?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=648&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–7″>        <img          src=”https://images.unsplash.com/photo-1503011994592-d30eb1ef61dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=995&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–8″>        <img          src=”https://images.unsplash.com/photo-1487790343276-2fe56a7d9439?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1047&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–9″>        <img          src=”https://images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–10″>        <img          src=”https://images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–11″>        <img          src=”https://images.unsplash.com/photo-1485962398705-ef6a13c41e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–12″>        <img          src=”https://images.unsplash.com/photo-1504123311630-7a21d62be4a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–13″>        <img          src=”https://images.unsplash.com/photo-1504123311630-7a21d62be4a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80″          alt=”Food picture 1″>      </figure>       <figure class=”cell cell–14″>        <img          src=”https://images.unsplash.com/photo-1559912553-fc5637d88768?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=735&q=80″          alt=”Food picture 1″>      </figure>     </section>
READ
Как обнаружить блокировщик рекламы

CSS

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104* {  margin: 0;  padding: 0;  box-sizing: inherit;} body {  box-sizing: border-box;  font-size: 62.5%;} .masonry {  background-color: white;  width: 100vw;  height: 100vh;  padding: 1rem;   display: grid;  grid-template-columns: repeat(16, 1fr);  grid-template-rows: repeat(14, 1fr);   row-gap: 1rem;  column-gap: 1rem;} img {  display: block;  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 5px;}  .cell–1 {  grid-column: 1 / 6;  grid-row: 1 / 6;}  .cell–2 {  grid-column: 6 / 9;  grid-row: 1 / 11;} .cell–3 {  grid-column: 9 / 12;  grid-row: 1 / 4;} .cell–4 {  grid-column: 12 / -1;  grid-row: 1 / 4;} .cell–5 {  grid-column: 1 / 4;  grid-row: 6 / 11;} .cell–6 {  grid-column: 4 / 6;  grid-row: 6 / 7;} .cell–7 {  grid-column: 4 / 6;  grid-row: 7 / 11;} .cell–8 {  grid-column: 1 / 6;  grid-row: 11 / -1;} .cell–9 {  grid-column: 6 / 12;  grid-row: 11 / -1;} .cell–10 {  grid-column: 9 / 12;  grid-row: 4 / 11;} .cell–11 {  grid-column: 12 / 13;  grid-row: 4 / 6;} .cell–12 {  grid-column: 13 / -1;  grid-row: 4 / 6;} .cell–13 {  grid-column: 12 / -1;  grid-row: 6 / 13;} .cell–14 {  grid-column: 12 / -1;  grid-row: 13 / -1;}

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

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

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

Автор: Shivam Kaushik

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий