Как да създадете галерия с изображения с CSS Grid

Галериите с изображения, направени от уебсайтове като Unsplash, Pinterest Etc, са направени чрез техники като позициониране или превод на изображението, което е много тромава задача. Можете да постигнете същата функционалност много бързо, като използвате CSS гридове.

Например: По- горе има галерия от изображения с изображения с различна ширина и височина, което е идеален случай за използване на CSS мрежи.

Да започваме!

Основната мрежа

Сега, нека създадем 8x8 решетка . Можем да създадем и мрежа с други размери, но това зависи от типа галерия, който искате. В нашия случай решетка 8x8 ще бъде идеална.

  • Контейнерът на мрежата се дефинира чрез задаване на свойството за показване на елемент на мрежата . И така, 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; }

Задаването на стойността на годното за обект покритие е като задаването на размера на фона, който да покрие за фоновото изображение . Правим това, за да може изображението да запълни височината и ширината на своето поле (елемента на мрежата), запазвайки съотношението му.

Забележка: Свойството за обект на обект работи само ако зададем свойствата за ширина и височина . Забележка: По подразбиране елементите на мрежата са разположени в съответствие с правилата за автоматично разположение на мрежата .

Позициониране на елементите на мрежата

Преди да започнем позиционирането на елементите на мрежата, ще изучим няколко основни концепции.

Grid div е контейнерът на мрежата и всички директни дъщерни елементи са елементите на мрежата . Когато дефинирахме решетъчните релси с grid-template-колони и grid-template-редове, grid ни предостави номерирани редове, наречени решетъчни линии, които да използваме за позициониране на елементите. Можете да се отнесете към всяка линия на мрежата чрез числов индекс.

Колони започват от едно от ляво на дясно по подразбиране и редове също започват в един от най-добре да се дъно . Необходими са две линии на мрежата, за да се направи една колона или ред, по един ред от двете страни, така че нашата 8-колонна и 8-редова мрежа се състоят от

9-колона линии и 9-ред линии .

Вертикалните линии 1 и 2 определят началната и крайната точка на първата колона. Редове 2 и 3 във втората колона и така нататък. По същия начин хоризонталните линии 1 и 2 определят позицията на първия ред , а линии 2 и 3 на втория ред и така нататък. Познаването на горните концепции ще ви помогне да разберете как ще позиционираме елементи (изображения) в нашата мрежа.

Сега ще използваме номера на решетката, за да контролираме начина на поставяне на елементите, като прилагаме свойства директно към елемента на мрежата. Можем да посочим на кой ред елемент от мрежата започва и завършва и колко песни трябва да се разшири .

1-ва решетка

Така че нека създадем ново правило, което е насочено към първия елемент на мрежата. Първо ще използваме свойството grid-column-start, за да посочим линията на мрежата на колоната, откъдето започва първият елемент на мрежата. В решетка колонна края показва, където първите краища решетка точка.

Така че решетка-колона старт стойността е число, което показва насочващите линии в левия край на колона. Решетка колона края на стойност показва мрежа линия, която марка десния край на колоната.

Така че в примера, даден по-долу, задаването на grid-колона-начало на 1 и grid-колона-край на 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; }
Забележка: Сега ще позиционираме други елементи на същите принципи, които научихме по-горе.

Втора решетка

.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; }

Четвърта решетка

.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!