04 серпня 2021

GRID Галерея

Перед Вами на малюнку знаходиться приклад галереї зображень із фото різної ширини та висоти, що є ідеальним варіантом використання сіток CSS.
Давайте розпочнемо! 

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

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

 HTML:

<div class="gallery"></div>

CSS:

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

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

Тепер ми будемо вставляти елементи сітки всередину контейнера сітки:
 <div class=”gallery”>
    <figure class=”gallery__item gallery__item--1">
    <img src="img/image-1.jpg" class="gallery__img" alt="Image 1">
    </figure>
    <figure class="gallery__item gallery__item--2">
    <img src="img/image-2.jpg" class="gallery__img" alt="Image 2">
    </figure>
    <figure class="gallery__item gallery__item--3">
    <img src="img/image-3.jpg" class="gallery__img" alt="Image 3">
    </figure>
    <figure class="gallery__item gallery__item--4">
    <img src="img/image-4.jpg" class="gallery__img" alt="Image 4">
    </figure>
    <figure class="gallery__item gallery__item--5">
    <img src="img/image-5.jpg" class="gallery__img" alt="Image 5">
    </figure>
    <figure class="gallery__item gallery__item--6">
    <img src="img/image-6.jpg" class="gallery__img" alt="Image 6">
    </figure>
    </div>
    

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

 Установка object fit значення cover , як і установка background size значення cover для background image . Ми робимо це, щоб зображення могло заповнити висоту та ширину свого вікна (елемента сітки), зберігаючи співвідношення сторін. 
Примітка: Властивість підбору об’єкта працює, лише якщо ми встановили властивості ширини та висоти (width та height). 
 Примітка: За замовчуванням елементи сітки викладаються відповідно до правил автоматичного розміщення сітки . 

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

 Перш ніж розпочати розміщення елементів сітки, ми вивчимо кілька основних концепцій. 
Div сітки - це контейнер сітки (grid container) , а всі прямі дочірні елементи (direct child)- елементи сітки(grid items) . 
Коли ми визначали доріжки сітки за допомогою grid-template-columns та grid-template-rows, grid надала нам нумеровані рядки, які називаються лініями сітки для використання позиціювання елементів. 
Ви можете посилатися на кожну лінію сітки за допомогою числового індексу. Стовпці починаються з першого зліва на право за замовчуванням, а рядки також починаються з першого верхньої частини до нижньої частини . 
Потрібно дві лінії сітки, щоб створити один стовпець або рядок, один рядок по обидві сторони, тому наша 8-стовпчаста та 8-рядова сітка складається з 9-стовпчастих ліній та 9-рядкових ліній . Вертикальні лінії 1 і 2 визначають початкову та кінцеву точки на першому стовпчику. 
Лінії 2 і 3 другий стовпець , і так далі. 
Так само горизонтальні лінії 1 і 2 визначають положення першого ряду , а лінії 2 і 3 другого ряду тощо. 
Знання наведених вище концепцій допоможе вам зрозуміти, як ми будемо розміщувати елементи (зображення) у нашій сітці. 
Тепер ми будемо використовувати номери рядків сітки, щоб контролювати спосіб розміщення елементів, застосовуючи властивості безпосередньо до елемента сітки. Ми можемо вказати, на якому рядку елемент сітки починається і закінчується , і на скільки треків він повинен розширюватися . 

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

 Тож давайте створимо нове правило, яке націлено на перший елемент сітки. 
Спочатку ми використаємо властивість 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, щоб вказати початок елемента сітки і кінцеву позицію для лінії ряду сітки таким же чином, як ми це робили для колонки.
.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;
    }
    

Огляд повного HTML та CSS коду Grid галереї.

Ви можете знайти повний код нижче. 

 HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i"
    rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">
    <title>CSS Grids Gallery</title>
    </head>
    <body>
    <div class="container">
    <div class="gallery">
    <figure class="gallery__item gallery__item--1">
    <img src="img/image-1.jpg" alt="Gallery image 1" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--2">
    <img src="img/image-2.jpg" alt="Gallery image 2" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--3">
    <img src="img/image-3.jpg" alt="Gallery image 3" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--4">
    <img src="img/image-4.jpg" alt="Gallery image 4" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--5">
    <img src="img/image-5.jpg" alt="Gallery image 5" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--6">
    <img src="img/image-6.jpg" alt="Gallery image 6" class="gallery__img">
    </figure>
    </div>
    </div>
    </body>
    </html>
    

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; */
    }
    
Ви можете спробувати додати власний CSS, щоб ця галерея виглядала так, як вам потрібно. 
Ви також можете дуже легко створювати більш складні галереї зображень. 
Я сподіваюся, ви знайшли цей пост інформативним і корисним. 
Буду радий почути ваші відгуки! 
 Автор: Abhishek Jakhar 
 Джерело: //medium.freecodecamp.org/ 
Український переклад: Чернієвський Юрій 
 Редакція: Чернієвський Юрій 
 Фото: Чернієвський Юрій

0 Коментарів Підписатися на цей блог