Kuidas CSS Gridiga pildigaleriid luua

Pilt galeriid tehtud veebilehed nagu Unsplash, Pinterest Jne, tehakse tehnikaid nagu positsioneerimise või tõlkimine pildi toode, mis on väga tülikas ülesanne teha. CSS Gridsi abil saate sama funktsionaalsuse saavutada väga kiiresti .

Näiteks: ülal on erineva laiuse ja kõrgusega piltidega piltide galerii, mis sobib suurepäraselt CSS-võrkude jaoks.

Alustame!

Alusvõrk

Nüüd loome 8x8 ruudustiku . Saame luua ka muu suurusega võre, kuid see sõltub soovitud galerii tüübist. Meie puhul sobib ideaalselt 8x8 võrk .

  • Võre mahuti on määratletud määramisega elemendi ekraani vara on grid . Niisiis, div , koos klassi ruudustikuga saab olema meie ruudustikukonteiner .
  • Me kasutame grid-template-veergu vara määrata veeru rajad ja grid-template-rida määrata rea lugusid. Deklareerime need omadused võrgukonteineris. Meie näites teeme 8x8 ruudustikukonteineri.
  • grid-gap: see määrab ruudustiku paigutuse ridade ja veergude vahelise lõhe suuruse . Võrgu lõhe väärtus võib olla mis tahes CSS pikkuse ühik. Meie näites olen andnud 15px väärtuse, et meie võrk oleks parem .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Märkus: ridade kõrgus on seotud vaateava laiusega, nii et lahtrid hoiavad oma kuvasuhte täiesti korras. Meil on mõlemal 8 rida , mille kõrgus on 5 vaateava laiust . Ma katsetanud neid kõrgused ja jõudis järeldusele, et 5% on vaateava laius on täiuslik suurus kõrgus. Teeme seda, seades rea kõrguseks 5vw (vaateava laius) . Märkus: Kõik otsest laste kohta grid automaatselt muutunud grid esemeid .

Võrguüksuste sisestamine

Nüüd sisestame ruudustiku elemendid ruudukonteinerisse:

Piltide kujundamine

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

Seadistamine objekti sobib väärtust kate on nagu määramisel tausta suurus kuni kate jaoks taustapilti . Teeme seda selleks, et pilt saaks täita oma kasti (ruudustiku) kõrguse ja laiuse, säilitades selle kuvasuhte.

Märkus . Objekti sobiv omadus töötab ainult siis, kui määrame laiuse ja kõrguse omadused. Märkus . Vaikimisi on ruudustikuüksused paigutatud vastavalt ruudustiku automaatse paigutuse reeglitele .

Võrguüksuste positsioneerimine

Enne kui alustame ruudustikuüksuste paigutamist, uurime mõningaid põhitõdesid.

Ruudustik div on ruudustikukonteiner ja kõik otsesed alamelemendid on ruudustikuelemendid . Kui määrasime ruudustiku rajad ruudustiku-malli-veergude ja ruudustiku-mall-ridadega, andis ruudustik meile nummerdatud read, mida nimetatakse ruudustiku joonteks, mida kasutada üksuste positsioneerimiseks. Igale ruudustiku reale saate viidata numbrilise indeksiga.

Veerud algavad ühe , alates vasakult et õigus vaikimisi, ja rida alustada ka üks top , et alt . Ühe veeru või rea tegemiseks kulub kaks rida, üks rida mõlemal küljel, nii et meie 8- ja 8-realised ruudustikud koosnevad

9-veerulised read ja 9-realised read .

Vertikaaljoontel 1 ja 2 kindlaks algust ja lõppu aspekti kohta esimeses tulbas. Lines 2 ja 3 teises tulbas ja nii edasi. Samamoodi määravad horisontaaljooned 1 ja 2 esimese rea positsiooni ning jooned 2 ja 3 teise rea ja nii edasi. Ülaltoodud mõistete tundmine aitab teil mõista, kuidas me paigutame üksused (pildid) oma võrku.

Nüüd kasutame ruudustiku ridade numbreid üksuste paigutuse juhtimiseks, rakendades atribuudid otse ruudustikuüksusele. Saame täpsustada, millisel real ruudustikuüksus algab ja lõpeb ning mitu rada see peaks laienema .

1. ruudustiku element

Nii et loome uue reegli, mis sihib esimest ruudustikuüksust. Kõigepealt kasutame atribuuti grid-column-start veergude ruudustiku rea näitamiseks, kust esimene ruudustiku element algab. Grid-veerus lõpus näitab, kus esimene grid kirje otsad.

Seega on ruudustiku-veeru-alguse väärtus arv, mis näitab ruudujooni veeru vasakus servas. Ruudustiku-veeru lõpu väärtus näitab ruudustikujoont, mis tähistab veeru paremat serva.

Nii et allpool toodud näites tähendab grid-column-start väärtuseks 1 ja grid-column-end väärtuseks 3 , et ruudustiku element venib ruudustikujoone vasakust servast, rida 1 kuni rida 3 , täites 2 veergu . Me kasutada ka grid-real-start ja grid-real-end omadused, mis näitab grid kirje alguses ja lõpus seisukoha kohta rea ruudujoonte samamoodi nagu tegime veerus.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Märkus. Nüüd paigutame teised punktid samadele põhimõtetele, mida õppisime eespool.

2. ruudustiku element

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

3. ruudustiku element

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

4. ruudustiku element

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

5. ruudustiku element

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

6. ruudustiku element

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

Täieliku koodi leiate allpool.

         CSS Grids Gallery 

Ja 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; */ }

Võite proovida lisada oma CSS-i, et see galerii näeks välja selline, nagu soovite. Samuti saate väga hõlpsalt luua keerukamaid pildigaleriisid.

CSS-võrkude kohta saate lisateavet allpool toodud lingilt

Võrgu täielik juhend CSS-trikid

CSS Grid Layout on kõige võimsam CSS-is saadaolev paigutussüsteem. See on kahemõõtmeline süsteem, mis tähendab, et see suudab ... css-tricks.com

Loodan, et olete leidnud selle postituse informatiivse ja kasuliku. Tahaksin hea meelega teie tagasisidet kuulda!

Aitäh, et lugesid!