Vous savez que CSS Grid est le système de mise en page le plus puissant en CSS, mais il est difficile de démarrer avec. Ou peut-être avez-vous essayé et échoué.
Ne serait-il pas formidable si vous pouviez apprendre tout ce dont vous avez besoin pour utiliser CSS Grid avec succès en un seul endroit, du niveau débutant au niveau avancé ?
Avec ce guide unique, vous apprendrez toutes les compétences dont vous avez besoin pour réussir avec CSS Grid.
Es-tu prêt à commencer? Commençons.
J'utilise une approche vraiment simplifiée, afin que vous puissiez comprendre les grilles CSS de la manière la plus simple possible.
Relation parent-enfant dans les grilles CSS
Vous avez peut-être entendu parler de la relation parent-enfant dans les éléments HTML.
Ci-dessous un exemple :
Comme vous pouvez le constater, un parent a trois enfants.
Le premier enfant est un développeur front-end, le deuxième enfant est un développeur back-end et le troisième est un développeur full-stack.
Avance rapide, j'ai ajouté quelques styles de base pour les parents et les enfants comme les couleurs, le rembourrage, etc.
Ci-dessous le résultat :
- Parent sur fond noir
- Enfants de différentes couleurs de fond
Dans les grilles CSS, nous avons des propriétés différentes pour les parents et les enfants.
Propriétés parentales de la grille CSS :
Vous trouverez ci-dessous la liste des propriétés parentes de la grille CSS que vous apprendrez :
- affichage (grille | grille-en-ligne)
- colonnes-modèle-de-grille
- lignes-de-modèle-de-grille
- aligner les éléments
- justifier-contenu
- justifier les éléments
- espacement des rangées
- espacement des colonnes
- grille-auto-colonnes
- grille-auto-lignes
- grille-auto-flux
- zones de modèle de grille
- modèle de grille
affichage (grille | grille-en-ligne) :
En CSS, vous connaissez déjà la propriété display, n'est-ce pas ?
Vous pouvez maintenant utiliser display: grid; (niveau bloc) ou display : inline-grid ; (Niveau en ligne)
Si vous ne connaissez pas le bloc CSS et le niveau en ligne.
niveau de bloc : qui redresse l'élément pour occuper tout l'espace.
niveau en ligne : il n'occupe aucun espace supplémentaire autre que l'élément ou le contenu intérieur.
La plupart du temps, vous utiliserez display: grid ;
Alors, qu'est-ce que ça fait ?
Il donne des super pouvoirs à tous les enfants directs du parent, sans cela, vous ne pouvez pas utiliser les propriétés de la grille CSS.
C’est donc la première et importante propriété que vous mettrez à l’intérieur pour lancer les grilles CSS.
Après avoir ajouté display: grid; vous ne remarquerez rien car tous les éléments ou enfants à l'intérieur du parent sont des div qui sont déjà des éléments au niveau du bloc, mais dans les coulisses, vous avez donné tellement de pouvoirs aux enfants.
colonnes-modèle-de-grille
La création de colonnes est désormais plus simple que jamais.
Disons que nous voulons créer deux colonnes, la première est à 20 % et la seconde doit être à 80 %.
Vous voyez donc que nous avons créé deux colonnes avec succès.
Le troisième enfant est automatiquement passé à la première colonne et à la deuxième ligne.
Attention : ces colonnes ne sont pas encore responsive, mais ne vous inquiétez pas, nous examinerons la partie responsive plus tard.
Vous pouvez créer n'importe quel nombre de colonnes.
Unité Fr (Fraction)
Et si vous voulez trois colonnes égales.
Pour cela, vous pouvez également utiliser le pourcentage comme (33,33% 33,33% 33,33%).
Mais vous devez utiliser l’unité fr(fraction) .
L'unité Fr ajuste automatiquement les pixels pour occuper tout l'espace restant.
1fr signifie espace simple, 2 signifie espace double, et ainsi de suite.
Si vous mettez 2fr pour la deuxième colonne, elle consommera beaucoup plus d'espace que les deux autres.
Et oui vous pouvez le combiner avec n'importe quelle autre unité comme 20% 1fr 160px
Non seulement vous pouvez également utiliser cette unité pour les lignes. Nous y reviendrons plus tard.
Les possibilités sont donc infinies.
lignes-de-modèle-de-grille
A partir de notre exemple, disons que vous le divisez en 2 colonnes avec 1fr 1fr le troisième enfant passera automatiquement à la deuxième ligne.
Vous voyez, qu'il a été ajusté automatiquement.
Si vous souhaitez que la première ligne reste la même et la deuxième ligne avec une hauteur de ligne de 200 px, vous devrez utiliser des lignes de modèle de grille avec des valeurs telles que 1fr 200 px .
Lacunes ou gouttières dans la grille CSS
Maintenant, vous connaissez les lignes et les colonnes et souhaitez un espace ou un espacement.
Disons que vous souhaitez mettre 10 px d'espace pour les colonnes et 30 px pour les lignes.
Vous pouvez utiliser la propriété column-gap pour les colonnes et row-gap pour les lignes.
Il existe une propriété abrégée appelée gap qui contient ensemble l'espace entre les lignes et l'espace entre les colonnes.
Fonction minmax()
En termes simples, vous dites à la grille CSS d'ajouter la valeur limite comme la largeur minimale et la largeur maximale de la colonne spécifiée.
Il accepte deux paramètres (la largeur minimale de colonne, la largeur maximale de colonne)
Remarque : Vous pouvez également utiliser minmax() avec les lignes de modèle de grille, les colonnes automatiques de grille et les lignes automatiques de grille.
Maintenant, vous pouvez voir que la première colonne utilise minmax().
Si vous réduisez votre écran, vous verrez que la première colonne restera sur 100px.
fonction répéter()
Et si vous voulez 20 colonnes de 100 px. Ainsi, au lieu d'écrire 100 pixels 20 fois dans les colonnes de modèle de grille, vous pouvez utiliser la fonction répéter ().
Il accepte deux paramètres (combien de colonnes vous souhaitez, largeur des colonnes)
Exemple:
grille-modèle-colonnes : répéter (20, 100 px)
Remarque : Vous pouvez également utiliser repeat() avec les lignes de modèle de grille.
Dans notre cas, nous avons deux colonnes répétées.
Avant:
Après:
contenu minimum vs contenu maximum
Dans le cas du contenu minimum, la boîte occupe l'espace en fonction du plus grand contenu de cette boîte.
Alors que max-content occupe l'espace pour l'ensemble du contenu.
Regardez dans 3 colonnes ( min-content, 1fr et max-content ).
Vous pouvez voir que la première colonne des enfants prend autant de place que le mot front-end.
Et sur le côté droit, la troisième colonne occupe l'espace en fonction de l'ensemble du contenu de la boîte. Ainsi, la largeur de la troisième colonne dépend du développeur Full-stack.
remplissage automatique vs ajustement automatique
Que faire si vous souhaitez des colonnes flexibles sans définir les numéros de colonnes explicites.
Par exemple, que se passe-t-il si vous n'êtes pas sûr du nombre de colonnes dont vous avez besoin et que vous souhaitez de la flexibilité ou des ajustements automatiques des colonnes en fonction des enfants ?
Dans la fonction repeat(), vous pouvez définir deux valeurs puissantes (remplissage automatique ou ajustement automatique) à la place du numéro de colonne.
le remplissage automatique fait automatiquement son calcul et renvoie 4 colonnes sans que nous nous souciions du numéro de colonne.
Il existe une légère différence entre le remplissage automatique et l'ajustement automatique, que j'aborderai plus tard. Pour l’instant, soyons simples et considérons les deux comme identiques.
lignes automatiques de la grille :
Que se passe-t-il si vous avez défini des lignes de modèle de grille pour deux lignes. Qu'arrivera-t-il aux enfants après deux rangées ?
Pour masquer ce défi, nous pouvons utiliser des lignes automatiques en grille.
Vous pouvez facilement définir automatiquement la hauteur de ligne souhaitée pour toutes les lignes restantes à la fois.
aligner les éléments :
Il est utilisé pour aligner les enfants dans la direction verticale de la cellule de la grille. Il accepte les valeurs suivantes :
aligner les éléments :
- ligne de base
- centre
- fin | extrémité flexible | fin personnelle
- démarrer | démarrage flexible | auto-démarrage
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
justifier les éléments :
Il est utilisé pour aligner les enfants dans la direction horizontale de la cellule de la grille. Il accepte les valeurs suivantes :
justifier les éléments :
- ligne de base
- centre
- fin | extrémité flexible | fin de soi | droite
- démarrer | démarrage flexible | auto-démarrage | gauche
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
aligner le contenu :
Il est utilisé pour aligner le conteneur de grille dans la direction verticale de la grille. Il accepte les valeurs suivantes :
aligner le contenu :
- ligne de base
- centre
- fin | extrémité flexible | fin de soi | droite
- démarrer | démarrage flexible | auto-démarrage | gauche
- espace autour
- l'espace entre
- uniformément dans l'espace
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
justifier-contenu :
Il est utilisé pour aligner le conteneur de grille dans la direction horizontale de la grille. Il accepte les valeurs suivantes :
justifier-contenu :
- ligne de base
- centre
- fin | extrémité flexible | fin de soi | droite
- démarrer | démarrage flexible | auto-démarrage | gauche
- espace autour
- l'espace entre
- uniformément dans l'espace
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
Avant:
Après:
Propriétés des enfants de la grille CSS :
Vous trouverez ci-dessous la liste des propriétés enfants CSS Grid que vous apprendrez :
- grille-colonne (grille-colonne-début et grille-colonne-fin)
- ligne de grille (début de ligne de grille et fin de ligne de grille)
- zone de grille
- se justifier
- s'aligner
- commande
ligne de grille :
Que se passe-t-il si vous souhaitez déplacer explicitement l'élément d'une ligne à une autre ?
Si l'enfant est au 1er rang et que vous souhaitez passer au deuxième.
Vous pouvez facilement le faire avec grid-row .
Il s'agit d'une forme abrégée pour début de ligne de grille et fin de ligne de grille.
début de la ligne de grille :
Ici, vous mettez le numéro de ligne de la ligne d’où vous commencez.
fin de ligne de grille :
Ici, vous mettez le numéro de ligne jusqu’à l’endroit où vous voulez terminer.
Vous trouverez ci-dessous une image pour les numéros de ligne :
Déplaçons le développeur front-end (premier enfant et première rangée) à la place du graphiste (quatrième enfant et 2ème rangée).
La deuxième ligne commence par la ligne numéro 2 et se termine à la ligne numéro 3 :
Forme courte :
colonne-grille
Que se passe-t-il si vous souhaitez déplacer explicitement l'élément d'une colonne à une autre ?
Si l'enfant est dans la première colonne et que vous souhaitez passer à la seconde.
Vous pouvez facilement le faire avec grid-column .
C'est une forme abrégée pour début de colonne de grille et fin de colonne de grille.
grid-column-start : Ici, vous mettez le numéro de ligne de la colonne d'où vous commencez.
grid-column-end : Ici, vous mettez le numéro de ligne de la colonne jusqu'à l'endroit où vous voulez terminer.
Vous trouverez ci-dessous une image pour les numéros de ligne de colonne :
Déplaçons maintenant le développeur front-end (premier enfant & 1ère colonne) à la place du développeur Full-stack (troisième enfant & 3ème colonne).
Remarque : Les deux autres enfants sont automatiquement passés à la deuxième rangée. La raison est que nous n'avons pas défini de ligne de grille pour cet enfant.
En ajoutant explicitement une ligne de grille, cela résoudra ce problème.
Spaning des lignes et des colonnes CSS :
Maintenant que vous avez découvert la grille-colonne et la grille-ligne.
Voici un exemple d'expansion des colonnes.
Colonne de cas : développez le premier enfant pour utiliser également l'espace de la deuxième colonne.
grille-colonne : 1 / 3 ; (Forme abrégée de début et de fin)
Case Row : maintenant, développez le premier enfant pour qu'il consomme également l'espace de la deuxième ligne.
rangée de grille : 1/3 ;
Maintenant, il existe également un moyen plus simple. Vous pouvez utiliser la valeur à l'intérieur d'une colonne ou d'une ligne de grille qui est étendue.
Cela signifie quelle quantité de consommation vous souhaitez dans une colonne ou une grille.
Comme le signifie span 2, consommez deux colonnes ou lignes.
Et oui, vous pouvez le combiner avec le concept de début et de fin.
Par exemple, commencez par 3, puis consommez 2 colonnes ou lignes supplémentaires.
s'aligner
Il est utilisé pour aligner les enfants individuels dans la direction verticale de la cellule de la grille. Il accepte les valeurs suivantes :
s'aligner :
- ligne de base
- centre
- fin | extrémité flexible | fin personnelle
- démarrer | démarrage flexible | auto-démarrage
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
Astuce : Cela fonctionne de la même manière que align-items (propriété du conteneur de grille). La différence est que align-self peut être utilisé pour aligner les enfants individuellement.
Exemple : vous souhaiterez peut-être que les premiers enfants soient au milieu de la cellule de la grille ou les troisièmes enfants à la fin de la cellule de la grille.
se justifier
Il est utilisé pour aligner les enfants individuels dans la direction horizontale de la cellule de la grille. Il accepte les valeurs suivantes :
se justifier :
- ligne de base
- centre
- fin | extrémité flexible | fin de soi | droite
- démarrer | démarrage flexible | auto-démarrage | gauche
- stretch (par défaut : lorsque vous définissez la grille, elle est automatiquement définie pour tous les enfants)
Astuce : Cela fonctionne de la même manière que Justify-Items (propriété du conteneur de grille). La différence est que la justification peut être utilisée pour aligner les enfants individuellement.
Exemple : Vous souhaiterez peut-être que les premiers enfants soient au centre de la cellule de la grille ou les troisièmes enfants à la fin de la cellule de la grille.
zones de modèle de grille
Il s'agit d'une propriété parent de grille CSS facultative et puissante. Je le place ici, afin que vous puissiez saisir facilement le concept.
Vous pouvez l'utiliser après avoir défini des colonnes ou des lignes de modèle de grille dans le parent.
Vous pouvez facilement nommer le système de grille souhaité , par exemple où placer le premier enfant et où placer le deuxième enfant, etc.
Disons que nous avons la disposition ci-dessous.
Maintenant, je veux placer les éléments de la grille comme :
- front-end (2 premières colonnes et dans la première ligne)
- back-end (3ème colonne et dans la première ligne)
- graphiste (première colonne et deuxième ligne)
- spécialiste du marketing numérique (première colonne et deuxième ligne)
- rédacteur de contenu (première colonne et deuxième ligne)
- full-stack (Toutes les colonnes et la dernière ligne)
Normalement, vous pouvez le faire avec les propriétés Grid-Column et Grid-Row, n'est-ce pas ?
Mais au lieu de les utiliser, vous pouvez simplement utiliser la zone de grille pour nommer chaque enfant.
Avant:
Après:
Dans Parent :
Dans Enfants ou articles :
La meilleure partie est que vous pouvez désormais simplement modifier la mise en page complète avec des zones de modèle de grille.
Disons que vous voulez :
- full-stack (2 premières colonnes et dans la deuxième ligne)
- Graphique et numérique (troisième ligne mais deux premières colonnes)
Note:
Vous devez toujours respecter le placement sur la grille. Sinon, cela brisera la mise en page.
Comme ci-dessous, vous pouvez voir afin de remplir la troisième colonne de la dernière ligne j'ai mis le point (qui sera considéré comme une colonne vide)
J'ai déjà expliqué ce qui est nécessaire pour cette propriété, mais vous pouvez toujours visiter MDN Web Docs et découvrir les zones de modèles de grille si vous avez besoin de connaissances supplémentaires.
Structure de la grille et terminologies :
La grille est composée de lignes de grille, de pistes de grille, de cellules de grille, de zones de grille, d'espaces de grille, d'éléments de grille et de conteneurs de grille.
Ligne de la grille
Les lignes verticales et horizontales qui divisent la grille et séparent les colonnes et les lignes sont appelées lignes de grille.
Des numéros sont attribués à chaque ligne et colonne.
À partir de l' exemple ci-dessus : colonnes de lignes de grille (1,2,3,4) et lignes de lignes de grille (1, 2, 3).
Conteneur de grille
Le conteneur, où vous donnerez des super pouvoirs. Vous pouvez l'appeler le conteneur principal de grille CSS parent où vous pouvez définir le nombre de colonnes, de lignes et d'espaces souhaités.
Élément de grille ou enfant
Ce sont les enfants directs à l'intérieur du conteneur de grille CSS. Disons que le parent a 3 enfants ou qu'un conteneur en grille contient 3 éléments.
Cellule de grille
Vous pouvez le considérer comme un bloc dans lequel vous pouvez placer les éléments de la grille explicitement (manuellement) ou implicitement (par force).
Zone de grille
La zone située entre deux lignes de quadrillage verticales et deux lignes horizontales est appelée zone de quadrillage.
Pistes de Gid
L'espace entre deux lignes de quadrillage s'appelle une piste, qu'il soit vertical (colonne) ou horizontal (ligne).
Exemple:
Piste de colonne de grille (1 -> 2, 2 -> 3, 3 -> 4)
Piste de rangée de grille (1 -> 2, 2 -> 3, 3 -> 4)
Lacunes de la grille CSS
L'espace entre les lignes et les colonnes est appelé espaces ou gouttières.
FAQ
Ici, je répondrai aux questions les plus posées dans les communautés CSS.
Q. La grille CSS est-elle utile ?
Oui, c'est super utile. La plupart des entreprises construisent leurs frameworks ou systèmes de conception sur des grilles CSS.
Q. La grille CSS est-elle importante ?
Si vous prétendez savoir écrire du CSS et ne pas connaître les grilles CSS, alors vous devez commencer à l'apprendre. C'est important, tout comme CSS flexbox.
Q. La grille CSS est-elle prise en charge ?
Oui, dans le développement Web moderne, les grilles CSS sont globalement prises en charge sur presque tous les navigateurs les plus récents. Vous pouvez voir l’adoption mondiale dans les navigateurs sur le site Web Caniuse .
Q. Comment fonctionne la grille CSS ?
Cela fonctionne dans les deux sens, horizontalement et verticalement. En comparaison, CSS flexbox ne fonctionne que dans une seule direction, horizontale ou verticale.
Q. Quand utiliser la grille CSS ?
Quand vous pensez que la grille CSS peut résoudre le problème de mise en page beaucoup plus rapidement et mieux que flexbox.
Q. Quand CSS Grid a-t-il été introduit ?
Selon Wikipedia, CSS Grid a été publié pour la première fois le 7 avril 2007.
Q. La grille CSS est-elle réactive ?
Par défaut, ce n'est pas le cas. Mais il est très simple de créer des mises en page réactives avec Grids.
Q. La grille CSS peut-elle être imbriquée ?
Pas pour le moment, les développeurs attendent que cette fonctionnalité soit disponible dans tous les navigateurs. À l'heure actuelle, Firefox moderne possède cette fonctionnalité qui est uniquement spécifique au navigateur et le concept est appelé sous-grilles.
Très important:
Guide en cours de préparation : J'écris et publie ce guide quotidiennement.
Si vous souhaitez recevoir des mises à jour, assurez-vous de vous abonner à notre newsletter et d'autoriser les notifications.
Encore une chose, je travaille également sur les grilles CSS eBook, Cheat-sheet et Course.
Restez à l'écoute.
Nos guides de codage :
