Come creare una galleria d'immagini con CSS Grid

Articolo originale: https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/

Le gallerie di immagini di siti come Unsplash o Pinterest, sono realizzate con tecniche che implicano il posizionamento e la traslazione delle immagini che possono rivelarsi piuttosto macchinose. Puoi ottenere lo stesso risultato usando CSS Grid.

Ad esempio: qui sopra puoi osservare una galleria di immagini di larghezza e altezza variabili: un caso ottimale per usare CSS Grid.

Iniziamo!

La griglia

Partiamo creando una griglia 8x8. Possiamo creare una griglia di altre dimensioni, ma questo dipende dal tipo di galleria desiderata. Nel nostro caso una griglia 8x8 è l'ideale.

• Un contenitore griglia (grid container) è definito impostando la proprietà display di un elemento sul valore grid. Quindi, il div con la classe grid sarà il nostro contenitore.
• Usiamo la proprietà grid-template-columns per impostare il tracciato delle colonne e grid-template-rows per impostare il tracciato delle righe. Dichiariamo queste proprietà per il contenitore. Nel nostro esempio, creeremo un contenitore griglia 8x8.
• La proprietà grid-gap definisce lo spazio tra le righe e tra le colonne nel layout a griglia. Il valore di questa proprietà può essere espresso in una unità di lunghezza CSS qualsiasi. Nel nostro esempio, ho usato il valore 15px per ottenere un aspetto ottimale.

HTML:

<div class="galleria"></div>

CSS:

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

Nota: l'altezza delle righe è legata alla larghezza del viewport, così che le celle mantengano correttamente il proprio rapporto d'aspetto. Abbiamo 8 righe, ognuna alta 5 vw (viewport width). Ho fatto diversi tentativi con le altezze e sono arrivato alla conclusione che il 5% della larghezza del viewport (5 vw) è la dimensione perfetta per l'altezza delle righe.

Nota: tutti i discendenti diretti del contenitore griglia diventano automaticamente elementi griglia (grid items).

Inserire elementi nella griglia

Adesso, inseriremo gli elementi all'interno del contenitore:

<div class="galleria">
  <figure class="galleria__elemento galleria__elemento--1">
    <img
      src="immagini/immagine-1.jpg"
      alt="Immagine della galleria 1"
      class="galleria__immagine"
    />
  </figure>
  <figure class="galleria__elemento galleria__elemento--2">
    <img
      src="immagini/immagine-2.jpg"
      alt="Immagine della galleria 2"
      class="galleria__immagine"
    />
  </figure>
  <figure class="galleria__elemento galleria__elemento--3">
    <img
      src="immagini/immagine-3.jpg"
      alt="Immagine della galleria 3"
      class="galleria__immagine"
    />
  </figure>
  <figure class="galleria__elemento galleria__elemento--4">
    <img
      src="immagini/immagine-4.jpg"
      alt="Immagine della galleria 4"
      class="galleria__immagine"
    />
  </figure>
  <figure class="galleria__elemento galleria__elemento--5">
    <img
      src="immagini/immagine-5.jpg"
      alt="Immagine della galleria 5"
      class="galleria__immagine"
    />
  </figure>
  <figure class="galleria__elemento galleria__elemento--6">
    <img
      src="immagini/immagine-6.jpg"
      alt="Immagine della galleria 6"
      class="galleria__immagine"
    />
  </figure>
</div>

Impostare lo stile delle immagini

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

Impostare il valore della proprietà object-fit su cover è come impostare il medesimo valore per background-size per un'immagine di sfondo. Lo stiamo facendo per fare in modo che l'immagine possa riempire l'altezza e la larghezza della sua cella (l'elemento griglia), mantenendo il proprio rapporto d'aspetto.

Nota: la proprietà object-fit funziona solo se abbiamo impostato le proprietà width e height.

Nota: di default gli elementi sono disposti secondo le regole di posizionamento automatico della griglia.

Posizionare gli elementi

Prima di iniziare a posizionare gli elementi, dobbiamo occuparci di qualche concetto di base.

Il div con la classe grid è il contenitore e tutti i suoi discendenti diretti sono elementi della griglia. Quando abbiamo definito il tracciato della griglia con grid-template-columns e grid-template-rows, abbiamo ottenuto delle linee da utilizzare per posizionare i nostri elementi. Possiamo fare riferimento a ogni linea con un indice numerico.

Di default, le colonne iniziano da uno, da sinistra verso destra, mentre le righe iniziano da uno dall'alto verso il basso. Una singola colonna o riga è generata da due linee della griglia, una per lato. Così la nostra griglia di 8 colonne e 8 righe è formata da 9 linee per le colonne e 9 linee per le righe.

Le linee verticali 1 e 2 delimitano il punto d'inizio e di fine della prima colonna. Le linee 2 e 3 delimitano la seconda colonna e così via. Analogamente, le linee orizzontali 1 e 2 delimitano la prima riga e le linee 2 e 3 la seconda riga e via dicendo. Conoscere questi concetti ti aiuterà a capire come andremo a posizionare gli elementi (le immagini) nella griglia.

Adesso useremo i numeri delle linee della griglia per controllare il posizionamento degli elementi, applicando direttamente delle proprietà ad un elemento della griglia. Possiamo specificare la linee in corrispondenza delle quali l'elemento deve iniziare e terminare, e quanti tracciati deve occupare.

1° elemento della griglia

Creiamo una nuova regola che seleziona il primo elemento .galleria__elemento--1. Iniziamo usando la proprietà grid-column-start per indicare la linea di partenza del primo elemento, mentre con grid-column-end indichiamo la fine del primo elemento.

Quindi il valore di grid-column-start è un numero che indica la linea della griglia corrispondente al lato sinistro della colonna e il valore di grid-column-end indica la linea che demarca il lato destra della colonna.

Nell'esempio qui sotto, impostare grid-column-start su 1 e grid-column-end su 3 significa che l'elemento della griglia si estenderà dal bordo sinistro della linea della griglia, dalla linea 1 alla 3, occupando 2 colonne. Usiamo anche le proprietà grid-row-start e grid-row-end per indicare l'inizio e la fine dello stesso elemento sulle linee delle righe della griglia, nello stesso modo in cui abbiamo fatto per le colonne.

.galleria__elemento--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

Nota: ora posizioneremo gli altri elementi con gli stessi principi che abbiamo appena imparato.

2° elemento della griglia

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

3° elemento della griglia

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

4° elemento della griglia

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

5° elemento della griglia

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

6° elemento della griglia

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

Puoi trovare il codice completo qui sotto.

<!DOCTYPE html>
<html lang="it">
  <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="immagini/favicon.png" />

    <title>Galleria con CSS Grid</title>
  </head>
  <body>
    <div class="contenitore">
      <div class="galleria">
        <figure class="galleria__elemento galleria__elemento--1">
          <img
            src="immagini/immagine-1.jpg"
            alt="Immagine della galleria 1"
            class="galleria__immagine"
          />
        </figure>
        <figure class="galleria__elemento galleria__elemento--2">
          <img
            src="immagini/immagine-2.jpg"
            alt="Immagine della galleria 2"
            class="galleria__immagine"
          />
        </figure>
        <figure class="galleria__elemento galleria__elemento--3">
          <img
            src="immagini/immagine-3.jpg"
            alt="Immagine della galleria 3"
            class="galleria__immagine"
          />
        </figure>
        <figure class="galleria__elemento galleria__elemento--4">
          <img
            src="immagini/immagine-4.jpg"
            alt="Immagine della galleria 4"
            class="galleria__immagine"
          />
        </figure>
        <figure class="galleria__elemento galleria__elemento--5">
          <img
            src="immagini/immagine-5.jpg"
            alt="Immagine della galleria 5"
            class="galleria__immagine"
          />
        </figure>
        <figure class="galleria__elemento galleria__elemento--6">
          <img
            src="immagini/immagine-6.jpg"
            alt="Immagine della galleria 6"
            class="galleria__immagine"
          />
        </figure>
      </div>
    </div>
  </body>
</html>

E il 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;
}

.contenitore {
  width: 60%;
  margin: 2rem auto;
}

.galleria {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 5vw);
  grid-gap: 1.5rem;
}

.galleria__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galleria__elemento--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Sintassi alternativa **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 1 / span 2; */
}

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

  /** Sintassi alternativa **/
  /* grid-column: 3 / span 2;  */
  /* grid-row: 1 / span 2; */
}

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

  /** Sintassi alternativa **/
  /* grid-column: 5 / span 4;
  grid-row: 1 / span 5; */
}

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

  /** Sintassi alternativa **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 3 / span 3; */
}

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

  /** Sintassi alternativa **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 6 / span 3; */
}

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

  /** Sintassi alternativa **/
  /* grid-column: 5 / span 4; */
  /* grid-row: 6 / span 3; */
}

Puoi provare ad aggiungere il tuo CSS  per dare a questa galleria l'aspetto che preferisci. Puoi anche creare una galleria di immagini più complessa con molta facilità.

Spero che tu abbia trovato questo articolo utile e interessante.

Grazie per aver letto questo articolo!