Vous pouvez utiliser CSS Grid, une mise en page bidimensionnelle, pour créer un contenu Web réactif. Comment utiliser CSS Grid Layout, et vous pouvez facilement déplacer des lignes sans jouer avec le code HTML. Lorsqu’il s’agit de diviser une page en zones clés ou de spécifier la relation entre les composants d’un contrôle construit à partir de primitives HTML, CSS Grid Layout excelle.
La disposition en grille permet à un auteur d’aligner des éléments dans des colonnes et des lignes de la même manière que les tables. Mais avec la grille CSS, beaucoup plus de mises en page sont réalisables ou plus simples qu’elles ne l’étaient avec les tableaux. Par exemple, comme les éléments positionnés en CSS, les éléments enfants d’un conteneur de grille peuvent se positionner de manière à se chevaucher et à se superposer.
Comment utiliser la disposition de grille CSS
Création d’une disposition de grille
Vous pouvez transformer n’importe quel élément de mise en page (section, conteneur, bloc, div) en une mise en page de grille CSS en définissant la valeur Display sur grid. Cet élément est votre Grid Container. Chaque élément enfant direct de votre conteneur Grid est un élément de grille, avec des paramètres supplémentaires pour la colonne de grille et la ligne de grille pour placer un élément dans le grid.
Lors de la modification d’un conteneur de grille dans le générateur, une superposition de grille devient visible indiquant les cellules de la grille. Cliquer sur la petite icône d’action d’élément à quatre carrés permet d’afficher/masquer cette superposition. Comme vous pouvez le voir dans la capture d’écran ci-dessus, les éléments de grille sont disposés en lignes par défaut, couvrant toute la largeur du conteneur de grille. Ce qui en soi ne libère pas la véritable puissance de la grille CSS, jusqu’à ce que vous commenciez.
Comment utiliser la grille CSS
Pour cette illustration, vous devez créer un élément div parent ( le conteneur de grille) et un ou plusieurs éléments div enfants afin de configurer une mise en page de grille (les éléments de grille).
Les éléments de grille sont les enfants directs du conteneur de grille. Ils sont disposés verticalement en colonnes et horizontalement en rangées. L’espace entre une ligne et une colonne s’appelle un espace. Vous pouvez ajuster l’écart à l’aide de ces propriétés :
grid-column-gap, qui définit l’écart entre les colonnes ; grid-row-gap, qui définit l’écart entre les lignes ; ou grid-gap, qui est une propriété raccourcie pour grid-column-gap et grid-row-gap.
Quand devriez-vous utiliser CSS Grid ?
Bien que vous puissiez utiliser CSS Grid dans pratiquement tous les aspects du développement Web, il existe certaines situations où c’est idéal. Par exemple, lorsque nous avons une mise en page de conception complexe à implémenter, CSS Grid est meilleur que la propriété CSS float. En effet, Grid est une mise en page bidimensionnelle (avec des colonnes et des lignes), alors que la propriété flottante CSS est une mise en page unidimensionnelle (avec des colonnes ou des lignes).
Grid est également un bon choix lorsque nous besoin d’un espace ou d’un espace entre les éléments. En utilisant la propriété CSS grid gap, l’espacement de deux éléments est beaucoup plus facile que d’utiliser les propriétés CSS margin et padding qui pourraient finir par compliquer les choses.
Avantages de CSS Grid
CSS Grid est très réactif et flexible. Les mises en page en deux dimensions sont simples à réaliser grâce à lui. En plus simple à utiliser, la plupart des navigateurs Web prennent en charge CSS Grid. Avec la grille CSS, vous avez beaucoup plus de flexibilité et un balisage plus propre (dans votre code HTML).
C’est en partie parce que l’utilisation de la grille CSS pour modifier la position d’un élément ne nécessite pas de modifier le balisage (code HTML). Dans l’ensemble, CSS Grid Layout nous permet de créer des mises en page plus complexes qui combinent des lignes et des colonnes.
FAQ
Comment personnaliser ma grille CSS ?
Configurer le conteneur de grille et les éléments de la grille. Une grille CSS se compose de pistes de grille horizontales et verticales (lignes et colonnes). … Ajoutez des gouttières. … Positionner les cellules de la grille. … Taille des cellules de la grille. … Définir des zones de grille nommées. … Créez des grilles imbriquées.
Est-il acceptable d’utiliser une grille en CSS ?
Est-il acceptable que ma mise en page utilise des grilles CSS ? Oui. La décision d’utiliser CSS Grid Layout, comme pour tout choix de technologie frontale, dépendra des navigateurs que la majorité des visiteurs de votre site utilisent.