Imagine galerii realizate de site-uri web precum Unsplash, Pinterest Etc, sunt realizate prin tehnici precum poziționare sau traducând elementul de imagine, care este o sarcină foarte greoaie de făcut. Puteți obține aceeași funcționalitate foarte rapid folosind Grile CSS.

De exemplu: Deasupra este o galerie de imagini cu imagini de lățime variabilă și înălţime care este un caz de utilizare perfect pentru grilele CSS.

Să începem!

Grila subiacentă

Acum, să creăm un Grilă 8×8. Putem crea și o grilă de alte dimensiuni, dar aceasta depinde de tipul de galerie dorit. În cazul nostru, un Grilă 8×8 va fi ideal.

  • Un container grilă este definit prin setarea unui element afişa proprietate la grilă. Asa ca div, cu grila clasei va fi al nostru grilă container.
  • Noi folosim grilă-șablon-coloane proprietate pentru a seta urmele coloanei și grilă-șablon-rânduri pentru a seta urme de rând. Declarăm aceste proprietăți pe containerul de rețea. În exemplul nostru, vom crea un container de rețea 8×8.
  • decalaj de rețea: Acesta definește dimensiunea fișierului decalaj între rânduri și coloane într-un aspect de grilă. Valoarea pentru spațiul de rețea poate fi orice unitate de lungime CSS. În exemplul nostru, am dat valoarea lui 15 px pentru a face al nostru aspectul grilei mai bine.

HTML:

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

CSS:

.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}

Notă: Înălțimea rândurilor este legată de lățimea ferestrei, astfel încât celulele să-și mențină raportul de aspect perfect. Noi avem 8 rânduri fiecare cu înălțimea de 5 lățimi ale ferestrei. Am experimentat aceste înălțimi și am ajuns la concluzia că 5% de lățimea ferestrei este dimensiune perfectă pentru înălțime. Facem acest lucru setând înălțimea rândului la 5vw (lățimea ferestrei).

Cum se creeaza o galerie de imagini cu CSS Grid
Grilă CSS 8×8 (8 melodii pe coloane și 8 melodii pe rând) cu linii de grilă de la 1 la 9 (ambele coloane și rânduri)

Notă: Toate copii directi de grilă devin automat elemente de grilă.

Introducerea elementelor din grilă

Acum, vom introduce elementele grilei în containerul grilei:

<div class=”gallery”>
  <figure class=”gallery__item gallery__item--1">
    <img src="https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/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>

Stilizarea imaginilor

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

Setarea potrivire obiect valoare pentru acoperi este ca setarea dimensiunea fundalului la acoperi pentru imagine de fundal. Facem acest lucru, astfel încât imaginea să poată umple înălțimea și lățimea casetei sale (elementul grilei), menținându-și raportul de aspect.

Notă: Proprietatea de potrivire a obiectului funcționează numai dacă setăm lăţime și înălţime proprietăți.

1611900426 257 Cum se creeaza o galerie de imagini cu CSS Grid

Notă: În mod implicit elemente de grilă sunt dispuse conform reguli de plasare automată a grilei.

Poziționarea elementelor din grilă

Înainte de a începe poziționarea elementelor de grilă, vom studia câteva concepte de bază.

Grila div este container grilă, și toate copil direct elementele sunt elemente de grilă. Când am definit pistele grilei cu grilă-șablon-coloane și grilă-șablon-rânduri, grilă furnizată noi linii numerotate numite linii de rețea de utilizat pentru poziționarea articolelor. Puteți face referire la fiecare linie a grilei printr-un index numeric.

Coloanele încep de la una, din stânga la dreapta în mod implicit și rânduri începe, de asemenea, de la unul din top la fund. Este nevoie de două linii de grilă pentru a crea o singură coloană sau rând, o linie de ambele părți, deci a noastră 8 coloane și 8 rânduri grila constă din
Linii cu 9 coloane și Linii de 9 rânduri.

Liniile verticale 1 și 2 determinați start și puncte finale din prima coloană. Linii 2 și 3 a doua coloană si asa mai departe. În mod similar, liniile orizontale 1 și 2 determina pozitia primul rand, și linii 2 și 3 al doilea rând și așa mai departe. Cunoașterea conceptelor de mai sus vă va ajuta să înțelegeți cum vom poziționa articole (imagini) pe grila noastră.

Acum, vom folosi numerele liniei grilei pentru a controla modul în care sunt plasate articolele prin aplicarea proprietăților direct unui element de grilă. Putem specifica pe ce linie un element de grilă începe și se termină, și câte piese ar trebui extinde.

Primul element al grilei

Deci, să creăm o nouă regulă care vizează primul element de grilă. Mai întâi vom folosi grila-coloana-start proprietate pentru a indica linia grilei coloanei de unde începe primul element grilă. grid-column-end indică unde se termină primul element de grilă.

Deci grila-coloana-start valoare este un număr care indică linia grilei la marginea stângă a unei coloane. Grila-coloană-sfârșit valoare indică linia grilei care marchează marginea dreaptă a coloanei.

Deci, în exemplul dat mai jos, setarea grila-coloana-start la 1 și grid-column-end la 3 înseamnă că elementul grilei se va întinde de la marginea stângă a liniei grilei, linia 1 la linia 3, umple 2 coloane. Vom folosi, de asemenea, grid-row-start și grilă-rând-sfârșit proprietăți pentru a indica începe elementul grilei și poziția finală pe linii de grilă de rând la fel ca noi pentru coloană.

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
1611900426 664 Cum se creeaza o galerie de imagini cu CSS Grid
Plasarea primului articol

Notă: Acum, vom poziționa alte elemente pe aceleași principii pe care le-am învățat mai sus.

Al doilea element al grilei

.gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
1611900426 110 Cum se creeaza o galerie de imagini cu CSS Grid
A doua plasare de articole

Al treilea element al grilei

.gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 6;
}
1611900426 901 Cum se creeaza o galerie de imagini cu CSS Grid
A treia plasare de articole

Al patrulea element de grilă

.gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 6;
}
1611900426 651 Cum se creeaza o galerie de imagini cu CSS Grid
A patra plasare de articole

Al cincilea element al grilei

.gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 9;
}
1611900426 403 Cum se creeaza o galerie de imagini cu CSS Grid
A cincea plasare de articole

Elementul al 6-lea grilă

.gallery__item--6 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 9;
}
1611900426 450 Cum se creeaza o galerie de imagini cu CSS Grid
A șasea element de plasare

Puteți găsi codul complet mai jos.

<!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="https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/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>

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

Puteți încerca să adăugați propriul CSS pentru ca această galerie să arate așa cum doriți să arate. De asemenea, puteți crea foarte ușor galerii de imagini mai complexe.

Puteți afla mai multe despre grilele CSS în linkul de mai jos

Un ghid complet pentru grila | CSS-Tricks
CSS Grid Layout este cel mai puternic sistem de layout disponibil în CSS. Este un sistem bidimensional, ceea ce înseamnă că poate …css-tricks.com

Sper că ați găsit această postare informativă și utilă. Mi-ar plăcea să vă aud feedbackul!

Mulțumesc că ai citit!