CSS Grid est un système de mise en page basé sur une grille bidimensionnelle qui vous permet de créer des mises en page de sites Web organisées et flexibles. Considérez-le comme une grille de colonnes et lignes que vous pouvez utiliser pour positionner et organiser les éléments de la page Web. Cependant, contrairement aux tableaux HTML, les mises en page CSS Grid sont contrôlées avec du CSS et non du balisage HTML. Cela rend CSS Grid extrêmement flexible pour une conception Web réactive.
Comment fonctionne la grille CSS Blocs
Lorsque vous travaillez avec CSS Grid dans Blocs, il est important de considérer que la disposition Grid est composée de deux éléments principaux, un conteneur de grille parent et, dans la plupart des cas, plusieurs conteneurs enfants internes.
Conteneur de grille parent
Le conteneur de grille parent est responsable des principales informations de mise en page. Par exemple, le nombre de colonnes/lignes et leurs dimensions d'espacement respectives s'appliquent à cet élément.
Conteneur enfant de grille
Les conteneurs enfants internes sont les boîtes dans lesquelles vous placez généralement les éléments de l'interface de votre site Web. Par défaut, ces conteneurs sont définis sur flux automatique (s'intègrent dans la grille), cependant, ils peuvent être personnalisés à l'aide de classes personnalisées afin d'être positionnés de différentes manières, dans le conteneur de grille parent.
Vous pouvez en savoir plus sur le positionnement des conteneurs enfants ici.
Ajouter un conteneur de grille
Vous pouvez commencer à utiliser CSS Grid dans votre Blocs projet en ajoutant un conteneur CSS Grid à l'aide du Bric.
Ou bien, en sélectionnant un Div Bric et en définissant son type au conteneur de grille.
La disposition de la grille CSS par défaut dans Blocs est deux colonnes sur deux lignes. Lorsque la mise en page est ajustée de quelque manière que ce soit, par exemple en ajoutant des colonnes ou des lignes supplémentaires, ces informations de mise en page personnalisées sont stockées dans une classe personnalisée qui est automatiquement appliquée au conteneur CSS Grid.
Il convient également de noter que les colonnes ont une largeur de 1fr et les lignes ont leur hauteur définie sur auto par défaut.
Colonnes
Les colonnes sont les divisions verticales de l'espace dans la disposition en grille CSS. Elles sont particulièrement utiles pour guider l'œil du spectateur, optimiser la lisibilité et utiliser efficacement l'espace.
Ajouter une colonne
Des colonnes supplémentaires peuvent être ajoutées à un conteneur CSS Grid en cliquant sur le bouton plus + situé dans le coin supérieur droit des commandes de sélection de la grille.
Supprimer une colonne
Les colonnes peuvent être supprimées d'un conteneur CSS Grid en cliquant sur le bouton Corbeille situé en haut à gauche d'un contrôleur de largeur de colonne.
Lorsque le nombre de colonnes or lignes est personnalisé, s'il n'y a pas assez de conteneurs enfants pour afficher correctement la mise en page, Blocs les insérera automatiquement dans le conteneur CSS Grid.
Il est également important de se rappeler que CSS Grid utilise du CSS pur pour contrôler la mise en page, ce qui signifie que des colonnes peuvent être ajoutées et supprimées. par point d'arrêt.
Largeur de colonne
Par défaut, la largeur d'une colonne est définie sur 1fr sur les conteneurs CSS Grid dans BlocsL’ fr l'unité représente la fraction. Cela représente une fraction de l’espace disponible dans le conteneur de grille.
Lorsqu'il est utilisé pour la largeur de colonne, 1fr signifie que la colonne occupera une fraction de l’espace total disponible. Si plusieurs colonnes utilisent le fr unité, l'espace est divisé en fonction de la valeur de fraction de chaque colonne par rapport à la somme des valeurs de fraction de toutes les colonnes.
La largeur d'une colonne peut être ajustée par point d'arrêt à l'aide de la poignée de redimensionnement située sur le contrôle de largeur de colonne. Faire glisser cette poignée à gauche or bon ajustera le fr valeur pour la colonne associée par incréments de 0.5.
Écart de colonne
Vous pouvez définir l'espacement entre colonnes sur chaque point d'arrêt en faisant glisser l'espace vide entre les colonnes dans le conteneur de grille sur le canevas de conception.
Vous pouvez également réinitialiser la mesure de l'écart entre les colonnes d'un conteneur CSS Grid en clic droit dans l'espace entre les colonnes et en sélectionnant Réinitialiser la largeur.
rangées
Les lignes sont les divisions horizontales de l'espace dans la disposition CSS Grid, elles garantissent que le contenu circule logiquement et maintiennent l'alignement visuel.
Ajouter une ligne
Des lignes supplémentaires peuvent être ajoutées à un conteneur CSS Grid en cliquant sur le bouton plus + situé dans le coin inférieur gauche des commandes de sélection de la grille.
Les lignes fonctionnent un peu différemment des colonnes, bien que vous puissiez ajouter plus de lignes, généralement le nombre de lignes est calculé et automatiquement ajusté en fonction du nombre de colonnes et de conteneurs enfants dans le conteneur de grille parent.
Supprimer une ligne
Le processus de suppression de lignes est un peu différent de celui de suppression de colonnes. Il n'est possible de supprimer des lignes que lorsqu'il existe un nombre négatif de conteneurs enfants par rapport au nombre de lignes dans la disposition en grille.
Lorsque le nombre de conteneurs enfants est négatif pour une ligne, un bouton de corbeille sera affiché sur le bord supérieur du contrôle de hauteur de ligne (qui ne contient aucun conteneur enfant). Cliquer sur ce bouton supprimera la ligne.
Hauteur de ligne
La hauteur par défaut d'une ligne est définie sur auto sur les conteneurs CSS Grid dans BlocsL’ auto unit indique essentiellement à la grille de déterminer automatiquement la hauteur de cette ligne en fonction de son contenu. En d’autres termes, la ligne sera aussi haute que l’élément de contenu le plus haut à l’intérieur des conteneurs enfants de grille de cette ligne.
La hauteur d'une colonne peut être ajustée par point d'arrêt à l'aide de la poignée de redimensionnement située sur le contrôle de hauteur de ligne. Faire glisser cette poignée up or down ajustera la hauteur de la rangée en Pixel.
Bien que cette option soit disponible, il est recommandé d'utiliser auto pour les hauteurs de rangées, car plus flexible quant à la réactivité de l'implantation.
Intervalle de ligne
Vous pouvez définir l'espacement entre lignes sur chaque point d'arrêt en faisant glisser l'espace vide entre les lignes du conteneur CSS Grid sur le canevas de conception.
Vous pouvez également réinitialiser la mesure de l'espacement des lignes d'un conteneur CSS Grid en clic droit dans l'espace entre les colonnes et en sélectionnant Réinitialiser la hauteur.
Positionnement des conteneurs enfants
Par défaut, ces conteneurs sont définis sur flux automatique (s'intègrent dans la grille), cependant, ils peuvent être personnalisés indépendamment à l'aide de classes personnalisées, afin d'être positionnés dans le conteneur de grille parent.
Afin de personnaliser la façon dont un conteneur enfant de grille est positionné dans la grille, vous devez d'abord le sélectionner et appliquer une classe personnalisée.
Le Éditeur de classe, il est désormais possible d'appliquer des valeurs au Élément de grille règles pour le conteneur enfant sélectionné afin de le positionner, dans son conteneur parent CSS Grid respectif.
Début de colonne
Le début de colonne de grille La propriété est utilisée pour indiquer la ligne de grille de colonnes où commence un élément de grille dans une disposition de grille.
Fin de colonne
Le fin de colonne de grille La propriété est utilisée pour indiquer le nombre de colonnes qu'un élément s'étendra, ou la ligne de grille de colonnes où un élément de grille se termine dans une disposition de grille.
Début de ligne
Le début de ligne de grille La propriété est utilisée pour indiquer la ligne de grille de ligne où commence un élément de grille dans une disposition de grille.
Fin de ligne
Le fin de ligne de grille La propriété est utilisée pour indiquer le nombre de lignes qu'un élément s'étendra, ou la ligne de ligne où un élément de grille se termine dans une disposition en grille.
Techniques de positionnement
En utilisant les propriétés de début de colonne, de fin de colonne, de début de ligne et de fin de ligne, il est possible de positionner les conteneurs enfants dans le conteneur parent CSS Grid. Voici quelques exemples courants de techniques de positionnement des enfants sur la grille.
Tous les exemples ici peuvent être examinés plus en détail dans ce Blocs exemple de projet.
Étendre les colonnes
Pour étendre un conteneur enfant de grille sur un certain nombre de colonnes, appliquez une classe au conteneur enfant, puis définissez la valeur Éléments de grille > Colonne > Fin valeur du champ à envergure suivi du nombre de colonnes sur lesquelles vous souhaitez répartir l'enfant.
Étendre les lignes
Pour étendre un conteneur enfant de grille sur un certain nombre de lignes, appliquez une classe au conteneur enfant, puis définissez la valeur Éléments de la grille > Ligne > Fin valeur du champ à envergure suivi du nombre de lignes sur lesquelles vous souhaitez étendre l'enfant.
Changer la position horizontale
Dans cet exemple, le conteneur enfant violet se trouve à l'origine dans la première position horizontale de la grille. À l'aide d'une classe personnalisée, il a été déplacé directement vers la deuxième position horizontale ou la deuxième colonne.
Pour positionner un conteneur enfant de grille horizontalement, appliquez une classe au conteneur enfant, puis définissez le Éléments de grille > Colonne > Début valeur du champ au numéro de colonne dans lequel vous souhaitez le positionner. Il est également important de définir la valeur du champ Éléments de la grille > Ligne > Début valeur du champ au numéro de ligne dans lequel vous souhaitez qu'il reste.
Changer la position verticale
Dans cet exemple, le conteneur enfant violet se trouve à l'origine dans la première position verticale de la grille, à l'aide d'une classe personnalisée, il a été déplacé vers la deuxième position verticale.
Pour positionner un conteneur enfant de grille verticalement, appliquez une classe au conteneur enfant, puis définissez le Éléments de la grille > Ligne > Début valeur du champ au numéro de ligne dans lequel vous souhaitez le positionner.
Lors du positionnement des conteneurs enfants de la grille, il est important de considérer que d'autres conteneurs enfants de la grille peuvent avoir des règles de positionnement de classe contradictoires appliquées, ce qui peut créer des erreurs de mise en page indésirables. Prenez soin de garder vos classes de grille organisées pour éviter toute confusion lors de la construction avec CSS Grid.
Lectures complémentaires
Cet article est destiné aux débutants qui font leurs premiers pas avec CSS Grid, si vous recherchez des informations plus approfondies et avancées sur CSS Grid, nous vous recommandons de lire ce guide d'introduction sur Grille CSS à partir des astuces CSS.