Sådan oprettes et billedgalleri med CSS Grid

Billede gallerier fra websteder som Unsplash, Pinterest Etc, er lavet af teknikker som at placere eller oversætte det billede element, som er en meget besværlig opgave at gøre. Du kan opnå den samme funktionalitet meget hurtigt ved hjælp af CSS Grids.

For eksempel: Ovenfor er et billedgalleri med billeder af varierende bredde og højde, hvilket er et perfekt anvendelses tilfælde for CSS-net.

Lad os komme igang!

Det underliggende gitter

Lad os nu oprette et 8x8 gitter . Vi kan også oprette et gitter af andre størrelser, men det afhænger af den type galleri, du ønsker. I vores tilfælde vil et 8x8 gitter være ideelt.

  • En gitterbeholder defineres ved at indstille elementets displayegenskab til gitteret . Så div , med klassegitteret bliver vores netcontainer .
  • Vi bruger egenskaben gitter-skabelon-søjler til at indstille søjlespor og gitter-skabelons-rækker til at indstille række-spor. Vi erklærer disse egenskaber på gitterbeholderen. I vores eksempel laver vi en 8x8 gittercontainer.
  • grid-gap: Det definerer størrelsen på afstanden mellem rækker og kolonner i et gitterlayout. Værdien for gitterafstand kan være en hvilken som helst CSS-længdeenhed. I vores eksempel har jeg givet værdien 15px for at få vores gitter til at se bedre ud .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Bemærk: Højden på rækkerne er bundet til visningsportens bredde, så cellerne opretholder sit billedformat perfekt. Vi har 8 rækker hver med højden 5 visningsbredde . Jeg eksperimenterede med disse højder og kom til den konklusion, at 5% af visningsportbredden er den perfekte størrelse til højden. Vi gør dette ved at indstille rækkehøjden til 5vw (visningsbredde) . Bemærk: Alle direkte børn af gitter bliver automatisk gitterelementer .

Indsættelse af gitterelementer

Nu indsætter vi gitterelementerne inde i gitterbeholderen:

Stylingbilleder

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

At indstille objektets tilpasningsværdi til at dække er som at indstille baggrundsstørrelsen til at dække for baggrundsbilledet . Vi gør dette, så billedet kan udfylde højden og bredden af ​​sin boks (gitterelementet) og opretholde dets billedformat.

Bemærk: Object fit-egenskaben fungerer kun, hvis vi indstiller egenskaberne for bredde og højde . Bemærk: Som standard er gitterartiklerne anlagt i henhold til reglerne for automatisk gitterplacering .

Positionering af gitterelementer

Før vi begynder at placere gitterelementerne, vil vi studere et par grundlæggende begreber.

Gitteret div er gitteret beholder , og alle de direkte underordnede elementer er gitter elementer . Da vi definerede gittersporene med gitter-skabelon-kolonner og gitter-skabelon-rækker, gav gitteret os nummererede linjer kaldet gitterlinjerne til brug for positionering af elementerne. Du kan henvise til hver gitterlinie med et numerisk indeks.

Kolonner starter som standard fra venstre mod højre , og rækker begynder også fra top til bund . Det tager to gitterlinjer at lave en enkelt kolonne eller række, en linje på hver side, så vores 8-kolonne og 8-række gitter består af

Linjer med 9 søjler og 9 rækker .

De lodrette linjer 1 og 2 bestemmer start- og slutpunkterne for den første kolonne. Linier 2 og 3 den anden kolonne og så videre. Ligeledes bestemmer vandrette linier 1 og 2 placeringen af ​​den første række , og linjerne 2 og 3 den anden række og så videre. At kende de ovennævnte begreber hjælper dig med at forstå, hvordan vi skal placere varer (billeder) på vores gitter.

Nu bruger vi gitterlinjenumre til at kontrollere, hvordan varer placeres ved at anvende egenskaber direkte på et gitterelement. Vi kan specificere på hvilken linje et gitterelement starter og slutter , og hvor mange spor det skal udvides .

1. rutenet

Så lad os oprette en ny regel, der er målrettet mod det første gitterelement. Vi bruger først gitter-søjle-start egenskaben til at angive søjlen gitterlinje, hvor det første gitter element starter. Den grid-søjle-ende angiver, hvor første Gitteremne ender.

Så gitter-søjle- startværdien er et tal, der angiver gitterlinjen i venstre kant af en søjle. Gitter-søjle- slutværdien angiver gitterlinjen, der markerer kolonnens højre kant.

Så i eksemplet nedenfor betyder indstilling af gitterkolonne-start til 1 og gitterkolonneende til 3 , at gitterelementet strækker sig fra venstre kant af gitterlinjen, linje 1 til linje 3 og udfylder 2 kolonner . Vi bruger også egenskaberne for gitter-række-start og gitter-række-ende til at indikere gitterelementets start- og slutpositionrække-gitterlinjerne på samme måde som vi gjorde for kolonnen.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Bemærk: Nu placerer vi andre ting på de samme principper, som vi lærte ovenfor.

2. rutenet

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

3. gitterpost

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

4. gitterpost

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

5. gitterartikel

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

6. gitterpost

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

Du kan finde den komplette kode nedenfor.

         CSS Grids Gallery 

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

Du kan prøve at tilføje din egen CSS for at få dette galleri til at se ud, som du vil have det til at se ud. Du kan også oprette mere komplekse billedgallerier meget let.

Du kan lære mere om CSS-net i nedenstående link

En komplet guide til gitter | CSS-tricks

CSS Grid Layout er det mest kraftfulde layoutsystem, der findes i CSS. Det er et 2-dimensionelt system, hvilket betyder, at det kan ... css-tricks.com

Jeg håber, du har fundet dette indlæg informativt og nyttigt. Jeg vil meget gerne høre din feedback!

Tak fordi du læste!