Index des recettes

Créer une galerie d'images

Ce guide donne les instructions pour créer une page qui présente plusieurs images sur une grille.

Ingrédients pour 1 galerie

Ajouter les images

Placer les fichiers d'images (jpg, png, etc.) dans le même dossier que la page HTML.

Dans l'élément body:

Ajouter le code suivant dans l'élément body pour insérer une image.

<img src="" alt="" />

Insérer le nom du fichier dans l'attribut src entre les guillemets (").

Ajouter un court texte de description de l'image dans l'attribut alt entre les guillemets. Cette description remplacera l'image pour les personnes qui ne peuvent pas la voir ou si l'image ne peut pas charger.

<img src="foret.jpg" alt="Une foret profonde et sombre avec de grands arbres" />

Répéter cette opération pour toutes les images.

Disposer les images en grille

Dans l'élément head de la page, ajouter un élément style qui contiendra toutes les regles de style de la page. Comme dans le code suivant :

<style>
    body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: min-content min-content min-content;
        grid-auto-rows: 1fr;
        gap: 5px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 5px;
        box-sizing: border-box;
        background: black;
        color: white;
    }

    h1, p {
        grid-column: 1 / 5;
        margin: 0;
        padding: 10px 25px;
    }

    img {
        width: 100%;
    }

    img:first-of-type {
        grid-column: 1 / 5;
    }
</style>

Ajuster selon l'envie :

  • Le nombre de colonnes en ajoutant (ou retirant) des valeurs dans grid-template-columns.
  • L'espacement entre les cases en changeant la valeur de gap.
  • Les marges externes en ajustant la valeur de margin.
  • Les marges internes en ajustant la valuer de padding.

Pour aller plus loin