Le CSS Grid est un module de mise en page en cascade (CSS) qui permet de créer des grilles flexibles et réactives pour organiser les éléments d'une page web. Il fournit un système de grille bidimensionnel, ce qui signifie que vous pouvez créer des mises en page en utilisant à la fois les colonnes et les lignes.

Avec CSS Grid, vous pouvez diviser l'espace disponible en une grille de lignes et de colonnes, puis placer les éléments de votre page dans des cellules spécifiques de cette grille. Vous pouvez contrôler la taille des colonnes et des lignes individuelles, ainsi que l'espacement entre elles. De plus, CSS Grid offre une grande flexibilité pour organiser les éléments à travers la grille, en permettant la fusion de cellules, le placement automatique des éléments, le contrôle de l'ordre d'affichage et bien plus encore.

Exemple

.grid-div

{

display:grid;

grid-template-columns:repeat(4, 1fr);

gap:10px;		

}

.grid-item

{

grid-column:1 / 3;	

grid-row:1 / 3;

}

Ces lignes de code font référence à des propriétés CSS utilisées pour créer une grille dans une mise en page web. Voici une explication détaillée des différentes parties du code :

1. .grid-div : C'est une classe CSS qui est appliquée à un élément HTML spécifique (par exemple, une div) pour lui donner des propriétés de grille.

2. display: grid; : Cette propriété CSS indique que l'élément avec la classe .grid-div doit être affiché comme une grille.

3. grid-template-columns: repeat(4, 1fr); : Cette propriété définit le nombre de colonnes de la grille et leur taille. Ici, il y a 4 colonnes définies avec la valeur "1fr". La fonction repeat(4, 1fr) répète la valeur "1fr" quatre fois pour créer les quatre colonnes.

4. gap: 10px; : Cette propriété définit l'espace (ou la marge) entre les éléments de la grille. Ici, il y a un espace de 10 pixels entre les éléments.

En résumé, la classe .grid-div crée une grille avec 4 colonnes de largeur égale et un espace de 10 pixels entre les éléments de la grille.

5. .grid-item : C'est une autre classe CSS qui est appliquée à un élément spécifique (par exemple, une div) pour lui donner des propriétés de placement dans la grille.

6. grid-column: 1 / 3; : Cette propriété spécifie la position des éléments dans la grille sur l'axe des colonnes. Ici, les éléments avec la classe .grid-item sont positionnés sur les colonnes 1 et 2 de la grille.

7. grid-row: 1 / 3; : Cette propriété spécifie la position des éléments dans la grille sur l'axe des lignes. Ici, les éléments avec la classe .grid-item sont positionnés sur les lignes 1 et 2 de la grille.

En résumé, la classe .grid-item positionne les éléments dans la grille de sorte qu'ils occupent les deux premières colonnes et les deux premières lignes.

Ces lignes de code sont utilisées pour créer une mise en page en grille responsive où les éléments peuvent être placés et alignés facilement.

NB : Pour intégrer des icônes dans une page web, suivez les étapes suivantes :

- Placez le code suivant à la fin de votre page, juste avant la balise de fermeture </body>, pour les activer :

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>;

<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>;

1. Rendez-vous sur le site https://ionic.io/ionicons.

2. Recherchez et cliquez sur l'icône que vous souhaitez utiliser.

3. En bas de la page, cliquez sur le bouton de code pour copier le code correspondant à l'icône choisie.

Voici un exemple d'utilisation :

<ion-icon name="call-outline"></ion-icon>

Intégrez ce code dans votre page web pour afficher l'icône souhaitée.


EXERCICE
Réalisé ce pied de page en utilisant HTML et CSS.
https://carrefour.codingclubhaiti.com/archive/realise-ce-pied-de-page-en-utilisant-html-et-css/2/71