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

Дата публикации: 2019-12-26

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

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

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

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

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

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

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

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

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

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

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

* {
  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;
}

* {

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;

}

<section class="masonry">
  <figure class="cell cell--1">
    <img
      src="//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>

<img

src="//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, который будет действовать как сетка и в конечном итоге будет содержать все элементы сетки.

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

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

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

img {

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 рядов. Давайте разместим первую ячейку сетки.

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

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

.cell--1 {

grid-column: 1 / 6;

grid-row: 1 / 6;

}

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

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

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

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

<section class="masonry">
      <figure class="cell cell--1">
        <img
          src="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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>

<img

src="//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>

<img

src="//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>

<img

src="//images.unsplash.com/photo-1485963631004-f2f00b1d6606?ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80"

alt="Food picture 1">

</figure>

<img

src="//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>

<img

src="//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>

<img

src="//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>

<img

src="//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>

<img

src="//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>

<img

src="//images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"

alt="Food picture 1">

</figure>

<img

src="//images.unsplash.com/photo-1483918793747-5adbf82956c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"

alt="Food picture 1">

</figure>

<img

src="//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>

<img

src="//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>

<img

src="//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>

<img

src="//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>

* {
  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;
}

100

101

102

103

104

* {

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

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

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

Метки: css

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

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

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

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

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

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

Материалы

Мы в соц. сетях

Связь

Информация