Kako stvoriti galeriju slika pomoću CSS Grid-a

Galerije slika koje izrađuju web stranice poput Unsplash, Pinterest itd. Izrađene su tehnikama poput pozicioniranja ili prevođenja predmeta slike, što je vrlo nezgodan zadatak. Istu funkcionalnost možete postići vrlo brzo koristeći CSS rešetke.

Na primjer: Iznad je galerija slika sa slikama različitih širina i visina, što je savršen slučaj za CSS mreže.

Započnimo!

Mreža u podlozi

Ajmo sada stvoriti mrežu 8x8 . Možemo stvoriti i mrežu drugih veličina, ali to ovisi o vrsti galerije koju želite. U našem slučaju, mreža 8x8 bit će idealna.

  • Spremnik mreže definira se postavljanjem svojstva prikaza elementa na mrežu . Dakle, div , s mrežom klase bit će naš spremnik mreže .
  • Svojstvo grid-template-columns koristimo za postavljanje staza stupaca, a grid-template-redovi za postavljanje staza redaka. Ta svojstva prijavljujemo na mrežnom spremniku. U našem primjeru ćemo napraviti spremnik mreže 8x8.
  • grid-gap: definira veličinu razmaka između redaka i stupaca u rasporedu mreže. Vrijednost razmaka mreže može biti bilo koja CSS jedinica duljine. U našem primjeru dao sam vrijednost 15 piksela kako bi naša mreža izgledala bolje .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Napomena: Visina redaka vezana je uz širinu okvira za prikaz, tako da ćelije održavaju njegov omjer slike potpuno u redu. Imamo 8 redova svaki s visinom od 5 širine vidnog polja . Eksperimentirao sam s ovim visinama i došao do zaključka da je 5% od širine viewport je savršena veličina za visinu. To radimo postavljanjem visine retka na 5vw (širina okvira za prikaz) . Napomena: Sva izravna podređena područja mreže automatski postaju stavke mreže .

Umetanje stavki mreže

Sada ćemo umetnuti stavke mreže u spremnik mreže:

Stiliziranje slika

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

Postavljanje fit objekt vrijednost naslovnici je kao postavljanje veličine pozadine za pokrova za pozadinsku sliku . To radimo kako bi slika mogla ispuniti visinu i širinu svog okvira (stavka mreže), zadržavajući svoj omjer slike.

Napomena: Svojstvo fit objekta funkcionira samo ako postavimo svojstva širine i visine . Napomena: Prema zadanim postavkama rešetke su raspoređene u skladu s pravilima automatskog postavljanja mreže .

Pozicioniranje stavki mreže

Prije nego što započnemo s postavljanjem stavki mreže, proučit ćemo nekoliko osnovnih pojmova.

Grid div je spremnik mreže , a svi izravni podređeni elementi su stavke mreže . Kada smo definirali tragove mreže s grid-template-columns i grid-template-redovi, grid nam je pružio numerirane linije nazvane grid linije koje ćemo koristiti za pozicioniranje predmeta. Svaku liniju mreže možete uputiti numeričkim indeksom.

Kolumne početi na jednom od lijevo na desno po defaultu, a redovi također početi na jednom od vrha do dna . Potrebne su dvije linije mreže da bi se napravio jedan stupac ili redak, po jedan redak s obje strane, tako da se naša mreža s 8 stupaca i 8 redaka sastoji od

Linije od 9 stupaca i 9 redaka .

Okomite linije 1 i 2 određivanje početne i završne točke iz prvog stupca. Linija 2 i 3 drugi stupac i tako dalje. Slično tome, vodoravne crte 1 i 2 određuju položaj prvog reda , a linije 2 i 3 drugog reda i tako dalje. Poznavanje gornjih koncepata pomoći će vam da razumijete kako ćemo postavljati stavke (slike) na našu mrežu.

Sada ćemo koristiti brojeve mrežnih linija kako bismo kontrolirali način postavljanja predmeta primjenom svojstava izravno na mrežu. Možemo odrediti na kojem retku stavka mreže započinje i završava te koliko tragova treba proširiti .

1. stavka rešetke

Pa izradimo novo pravilo koje cilja prvu stavku mreže. Prvo ćemo upotrijebiti svojstvo grid-column-start da označimo liniju mreže stupca odakle započinje prva stavka mreže. Rešetke stupaca kraju pokazuje gdje je prvi krajeve mreže stavku.

Tako je mreža-stup-start vrijednost je broj koji označava mrežu liniju na lijevom rubu stup. Rešetka stupca-end vrijednost ukazuje na grid linije koja označava desni rub stupca.

Dakle, u primjeru navedenom u nastavku, postavljanje grid-column-start na 1 i grid-column-end na 3 znači da će se stavka mreže protezati od lijevog ruba linije mreže, linije 1 do linije 3 , ispunjavajući 2 stupca . Također ćemo koristiti grid-red-start i grid-red-end osobine ukazuju na početak mreža stavke i krajnji položaj na red mrežom linija na isti način kao što smo učinili za stupac.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Napomena: Sada ćemo druge stavke postaviti na iste principe koje smo gore naučili.

2. stavka rešetke

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

3. stavka rešetke

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

4. stavka rešetke

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

5. stavka rešetke

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

6. stavka rešetke

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