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

Галереї зображень, створені веб-сайтами, такими як Unsplash, Pinterest Etc, створюються такими методами, як позиціонування або переклад зображення, що є дуже громіздким завданням. Ви можете швидко досягти тієї ж функціональності, використовуючи CSS Grids.

Наприклад: Вгорі галерея зображень із зображеннями різної ширини та висоти, що є ідеальним варіантом використання для сіток CSS.

Давайте розпочнемо!

Основна сітка

Тепер давайте створимо сітку 8x8 . Ми можемо створити сітку інших розмірів, але це залежить від типу галереї, яку ви хочете. У нашому випадку ідеально підійде сітка 8х8 .

  • Контейнер сітки визначається шляхом встановлення властивості відображення елемента до сітки . Отже, div з сіткою класу буде нашим контейнером сітки .
  • Ми використовуємо властивість grid-template-columns для встановлення доріжок стовпців та grid-template-рядків для встановлення доріжок рядків. Ми оголошуємо ці властивості в контейнері сітки. У нашому прикладі ми створимо сітчастий контейнер розміром 8x8.
  • grid-gap: Він визначає розмір зазору між рядками та стовпцями в макеті сітки. Значенням зазору сітки може бути будь-яка одиниця довжини CSS. У нашому прикладі я вказав значення 15px, щоб наша сітка виглядала краще .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Примітка: Висота рядків прив’язана до ширини області перегляду, так що клітинки підтримують пропорції пропорції абсолютно точно. У нас є 8 рядків, кожен з висотою 5 ширини області перегляду . Я експериментував з цими висотами і дійшов висновку, що 5% ширини області огляду - це ідеальний розмір для висоти. Ми робимо це, встановлюючи висоту рядка 5vw (ширина області перегляду) . Примітка: Всі прямі діти з сітки автоматично стають елементами сітки .

Вставка елементів сітки

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

Стилізація зображень

.gallery__img { width: 100%; height: 100%; object-fit: cover; }

Установка Умістити значення кришки , як установка фону розміру для обкладинки для фонового зображення . Ми робимо це, щоб зображення могло заповнити висоту та ширину свого вікна (елемента сітки), зберігаючи співвідношення сторін.

Примітка: Властивість підбору об’єкта працює, лише якщо ми встановили властивості ширини та висоти . Примітка: За замовчуванням елементи сітки викладаються відповідно до правил автоматичного розміщення сітки .

Розміщення елементів сітки

Перш ніж розпочати розміщення елементів сітки, ми вивчимо кілька основних концепцій.

Div сітки - це контейнер сітки , а всі прямі дочірні елементи - елементи сітки . Коли ми визначали доріжки сітки за допомогою grid-шаблон-стовпців та grid-шаблон-рядків, сітка надавала нам нумеровані рядки, які називаються лініями сітки для використання для позиціонування елементів. Ви можете посилатися на кожну лінію сітки числовим індексом.

Стовпці починаються в один з вліво на право за замовчуванням, а рядки також починаються в одній з верхньої частини до нижньої частини . Потрібно дві лінії сітки, щоб створити один стовпець або рядок, один рядок по обидві сторони, тому наша сітка з 8 стовпців і 8 рядків складається з

9- рядкові рядки та 9-рядкові рядки .

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

Тепер ми будемо використовувати номери рядків сітки, щоб контролювати спосіб розміщення елементів, застосовуючи властивості безпосередньо до елемента сітки. Ми можемо вказати, на якому рядку елемент сітки починається і закінчується , і скільки треків він повинен розширюватися .

1-й елемент сітки

Тож давайте створимо нове правило, яке націлено на перший елемент сітки. Спочатку ми використаємо властивість grid-column-start, щоб вказати рядок сітки стовпця, з якого починається перший елемент сітки. Сітка-колонний кінець указует , де перші кінці елемента сітки.

Таким чином , сітка-колонки пуску значення являє собою число , яке вказує на лінію сітки на лівому краю колони. Сітка-колонний кінець значення указует сітки лінії, що відзначають правий край колони.

Отже, у прикладі, наведеному нижче, встановлення grid-column-start на 1 і grid-column-end на 3 означає, що елемент сітки буде тягнутися від лівого краю лінії сітки, рядка 1 до рядка 3 , заповнюючи 2 стовпці . Ми також будемо використовувати властивості grid-row-start і grid-row-end, щоб вказати початкову та кінцеву позиції елемента сітки на рядках сітки рядка так само, як це було зроблено для стовпця.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Примітка: Тепер ми будемо позиціонувати інші пункти на тих самих принципах, які ми вивчили вище.

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

.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }

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

.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }

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

.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }

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

.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }

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

.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }

You can find the complete code below.

         CSS Grids Gallery 

And the CSS:

*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }

You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.

You can learn more about the CSS Grids in the link given below

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

Thank you for reading!