Grille en CSS

Grille en CSS

La grille en CSS est un outil puissant qui permet la création de mises en page complexes et réactives pour les sites Web et les applications Web. Avec lui, il est possible de diviser la page en lignes et en colonnes, créant une structure qui facilite le positionnement des éléments.

Fonctionnement de la grille en CSS

La Grille en CSS fonctionne en créant un conteneur qui définit la grille de la page. Ce conteneur est divisé en lignes et en colonnes, qui peuvent être définies manuellement ou via une fonction CSS automatique.

Pour définir le Grid en CSS, il faut utiliser les propriétés display: grid et grid-template-columns et grid-template-rows. La première propriété définit le type de mise en page, tandis que les deux autres définissent le nombre et la taille des colonnes et des lignes.

De plus, vous pouvez définir l'espacement entre les colonnes et les lignes avec les propriétés grid-column-gap et grid-row-gap.

Avantages de la grille en CSS

CSS Grid offre plusieurs avantages pour le développement de mises en page réactives. Certains des principaux avantages sont :

• Un meilleur contrôle sur le placement des éléments sur la page ;
• Plus de flexibilité pour créer des mises en page complexes ;
• Adaptation plus facile de la mise en page aux différentes tailles d'écran ;
• Mise en page simplifiée avec des éléments de différentes tailles et proportions

Exemple d'utilisation de Grid en CSS

Pour illustrer l'utilisation de la Grille en CSS, créons une mise en page simple avec trois colonnes et deux lignes :

```html ``` ``` CSS .récipient { affichage : grille ; grille-modèle-colonnes : répéter (3, 1fr) ; grille-modèle-lignes : répéter (2, 1fr) ; grille-colonne-écart : 10 px ; écart de ligne de grille : 10 px ; } .article { couleur d'arrière-plan : #ccc ; rembourrage : 20px ; aligner le texte : centrer ; } ```

Dans cet exemple, nous créons un conteneur avec la classe .container et six éléments avec la classe .item. Nous définissons la mise en page comme une grille avec trois colonnes et deux lignes, avec un espacement de 10 pixels entre les colonnes et les lignes.

Avec Grid en CSS, vous pouvez créer facilement des mises en page complexes et réactives, ce qui vous donne plus de contrôle et de flexibilité pour le développement de sites Web et d'applications Web.

Page suivante de lebook gratuit :

30Requêtes multimédias en CSS

2 minutes