Comment créer une galerie d'images avec CSS Grid

Les galeries d' images créées par des sites Web comme Unsplash, Pinterest, etc. sont créées par des techniques telles que le positionnement ou la traduction de l'élément d'image, ce qui est une tâche très lourde à faire. Vous pouvez obtenir la même fonctionnalité très rapidement en utilisant CSS Grids.

Par exemple: ci- dessus se trouve une galerie d'images avec des images de largeur et de hauteur variables , ce qui est un cas d'utilisation parfait pour les grilles CSS.

Commençons!

La grille sous-jacente

Maintenant, créons une grille 8x8 . Nous pouvons également créer une grille d'autres tailles mais cela dépend du type de galerie que vous souhaitez. Dans notre cas, une grille 8x8 sera idéale.

  • Un conteneur de grille est défini en définissant la propriété d' affichage d' un élément sur la grille . Ainsi, le div , avec la grille de classe va être notre conteneur de grille .
  • Nous utilisons la propriété grid-template-columns pour définir les pistes de colonne et grid-template-rows pour définir les pistes de ligne. Nous déclarons ces propriétés sur le conteneur de grille. Dans notre exemple, nous allons créer un conteneur de grille 8x8.
  • grid-gap: définit la taille de l' écart entre les lignes et les colonnes dans une disposition de grille. La valeur de l'écart de grille peut être n'importe quelle unité de longueur CSS. Dans notre exemple, j'ai donné la valeur de 15px pour que notre grille soit meilleure .

HTML:

CSS:

.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Remarque: la hauteur des lignes est liée à la largeur de la fenêtre, de sorte que les cellules conservent parfaitement leurs proportions. Nous avons 8 lignes chacune avec une hauteur de 5 largeur de fenêtre . J'ai expérimenté ces hauteurs et suis arrivé à la conclusion que 5% de la largeur de la fenêtre est la taille parfaite pour la hauteur. Nous faisons cela en définissant la hauteur de la ligne sur 5vw (largeur de la fenêtre) . Remarque: tous les enfants directs de la grille deviennent automatiquement des éléments de la grille .

Insérer des éléments de grille

Maintenant, nous allons insérer les éléments de la grille dans le conteneur de la grille:

Images de style

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

Définir la valeur d' ajustement de l' objet à couvrir revient à définir la taille d'arrière - plan à couvrir pour l' image d'arrière - plan . Nous faisons cela pour que l'image puisse remplir la hauteur et la largeur de sa boîte (l'élément de la grille), en conservant son rapport hauteur / largeur.

Remarque: la propriété d'ajustement d'objet ne fonctionne que si nous définissons les propriétés de largeur et de hauteur . Remarque: Par défaut, les éléments de la grille sont disposés selon les règles de placement automatique de la grille .

Positionnement des éléments de la grille

Avant de commencer à positionner les éléments de la grille, nous étudierons quelques concepts de base.

La grille div est le conteneur de la grille et tous les éléments enfants directs sont les éléments de la grille . Lorsque nous avons défini les pistes de la grille avec des colonnes de modèle de grille et des lignes de modèle de grille , la grille nous a fourni des lignes numérotées appelées lignes de grille à utiliser pour positionner les éléments. Vous pouvez faire référence à chaque ligne de la grille par un index numérique.

Les colonnes commencent à une , de gauche à droite par défaut, et les lignes commencent également à une de haut en bas . Il faut deux lignes de grille pour créer une seule colonne ou ligne, une ligne de chaque côté, donc notre grille à 8 colonnes et 8 lignes se compose de

Lignes à 9 colonnes et lignes à 9 lignes .

Les lignes verticales 1 et 2 déterminent les points de début et de fin de la première colonne. Lignes 2 et 3 la deuxième colonne et ainsi de suite. De même, les lignes horizontales 1 et 2 déterminent la position de la première ligne , et les lignes 2 et 3 la deuxième ligne et ainsi de suite. Connaître les concepts ci-dessus vous aidera à comprendre comment nous allons positionner les éléments (images) sur notre grille.

Nous allons maintenant utiliser les numéros de ligne de la grille pour contrôler la façon dont les éléments sont placés en appliquant des propriétés directement à un élément de la grille. Nous pouvons spécifier sur quelle ligne un élément de la grille commence et se termine , et combien de pistes il doit étendre .

1er élément de la grille

Créons donc une nouvelle règle qui cible le premier élément de la grille. Nous allons d'abord utiliser la propriété grid-column-start pour indiquer la ligne de grille de colonne où commence le premier élément de grille. La grille-colonne-fin indique où se termine le premier élément de la grille.

Ainsi, la valeur de début de colonne de grille est un nombre qui indique la ligne de grille sur le bord gauche d'une colonne. La valeur de fin de colonne de grille indique la ligne de grille qui marque le bord droit de la colonne.

Ainsi, dans l'exemple ci-dessous, définir grid-column-start sur 1 et grid-column-end sur 3 signifie que l'élément de grille s'étendra du bord gauche de la ligne de quadrillage, ligne 1 à ligne 3 , remplissant 2 colonnes . Nous utiliserons également les propriétés grid-row-start et grid-row-end pour indiquer la position de début et de fin de l' élément de grille sur les lignes de la grille de la même manière que nous l'avons fait pour la colonne.

.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Remarque: Maintenant, nous allons positionner d'autres éléments sur les mêmes principes que nous avons appris ci-dessus.

2e élément de la grille

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

3e élément de la grille

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

4ème élément de la grille

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

5ème élément de la grille

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

6ème élément de la grille

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

You can find the complete code below.

         CSS Grids Gallery 

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

You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.

You can learn more about the CSS Grids in the link given below

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

Thank you for reading!