Le guide de la grille CSS

Découvrons le nouveau système de création de mises en page bidimensionnelles en CSS appelé CSS Grid, comparons-le à Flexbox et apprenons à personnaliser de superbes mises en page.

Dans cet article, nous allons en savoir plus sur un puissant système de mise en page pour créer des mises en page étonnantes et magnifiques sur le Web – nous allons en apprendre davantage sur CSS Grid. Nous allons comprendre pourquoi cette technologie a été créée et de quoi il s'agit exactement, quels problèmes elle nous aide à résoudre, ses similitudes avec Flexbox et comment elle fonctionne dans les navigateurs modernes pour nous permettre de créer des mises en page puissantes sans avoir à en ajouter beaucoup. de code CSS supplémentaire.

Si vous n'êtes pas nouveau dans le développement Web, vous vous souvenez peut-être d'une époque où nous n'avions pas beaucoup de technologie ou d'outils pour créer des mises en page en CSS et HTML, lorsque les clients nous en demandaient des choses avancées et nous n’avons pas pu les faire. Parfois, ce n'était pas une fonctionnalité aussi avancée, mais le Web et les technologies qu'il nous proposait à l'époque n'étaient pas les meilleurs et, bien sûr, n'étaient pas les bonnes technologies pour le travail.

La plupart du temps lorsque nous essayions de créer des mises en page avancées en utilisant CSS, nous nous sommes retrouvés avec du code sombre et géant dans notre application, avec tout un tas de divs, de span, de classes, etc. À l'époque, nous n'avions pas Flexbox pour nous aider positionnons les éléments sur la page comme nous le voulions, et nous n'avions pas beaucoup des éléments sémantiques que HTML5 nous fournit aujourd'hui, comme aparté, en-tête, nav, etc.

Le Web était dans un énorme, remarquable, et évolution impressionnante au cours de ces années, obtenant plus de support pour les technologies, et les navigateurs ont également évolué pour suivre les nombreuses API Web que nous avons de nos jours. Cela simplifie la vie de tous les internautes. Aujourd'hui, chaque utilisateur est capable de naviguer sur n'importe quel site Web sur n'importe quel appareil, sans rencontrer aucun problème. Aujourd'hui, nous sommes capables de créer des mises en page et des sites Web impressionnants, capables de créer des choses étonnantes qui n'étaient même pas imaginables ces années-là.

Dans cet article, nous allons en apprendre davantage sur la mise en page la plus excitante et la plus puissante système que nous avons aujourd'hui pour créer des mises en page sur le Web en utilisant CSS: CSS Grid. Tout d'abord, revenons un peu à Flexbox, qui nous donnera une base pour les mises en page sur le Web. Ensuite, nous allons découvrir pourquoi CSS Grid est une technologie si puissante et comment nous pouvons commencer à l'utiliser aujourd'hui pour créer les mises en page les plus avancées au monde.

Back to Flexbox

Une manière passionnante et innovante de créer de belles mises en page sur le web a été lancée il y a quelques années, le premier brouillon publié le 23 juillet 2009. Appelé Flexbox, il nous aide à créer des mises en page plus efficaces et plus belles en nous permettant d'organiser, de positionner et de trier les éléments sur la page de toute façon. vouloir. Il est devenu tellement plus facile de créer des sites Web en utilisant Flexbox car, avec lui, tout ce que nous devons faire pour commencer à l'utiliser est de passer un affichage : flex à un élément de la page, puis cet élément devient un conteneur .

Lorsque vous passez un display: flex à un élément, cet élément spécifique deviendra désormais un conteneur, ce qui signifie qu'il alignera les éléments horizontalement par défaut. Vous pouvez le modifier pour aligner les éléments verticalement si vous le souhaitez; tout ce que vous devez faire est de passer flex direction: colonne .

Flexbox est un moyen tellement agréable et intuitif de créer de belles mises en page sur le Web. Si vous ne savez pas encore comment l’utiliser correctement, je vous recommande vivement de lire la documentation MDN des concepts de base de Flexbox. Ensuite, même si vous migrez vers CSS Grid, vous pouvez avoir une base assez solide de systèmes de mise en page sur le Web, ce qui facilite l'apprentissage de CSS Grid.

Mais, quel est exactement le problème avec Flexbox? En quoi Flexbox est-il différent de CSS Grid?

La principale différence entre Flexbox et CSS Grid est: Flexbox est un système de mise en page unidimensionnel tandis que CSS Grid est un bidimensionnel système de disposition basé sur la grille.

En utilisant Flexbox, vous aurez la taille de votre flex-item définie à l'intérieur du flex- élément lui-même, dans CSS Grid, vous l'aurez défini dans le conteneur de grille. Une autre différence entre eux est que dans Flexbox, vous aurez une limitation de colonne ou de ligne, tout en utilisant CSS Grid, vous n'aurez pas ce problème car vous définissez la bonne quantité de colonnes ou de lignes que vous voulez.

Ils ont beaucoup de différences, mais elles ne sont pas si différentes lorsque nous parlons de création de mises en page – vous pouvez atteindre le même objectif en utilisant les deux, mais avec des implémentations différentes. Lorsque vous utilisez CSS Grid, vous pouvez et la plupart du temps finir par utiliser Flexbox dans votre CSS, et vice versa, mais CSS Grid est un moyen plus puissant de créer des mises en page belles et avancées, car il s'agit d'un système de mise en page bidimensionnel . Cela signifie que nous pouvons avoir autant de colonnes ou de lignes que nous le voulons, sans avoir à adapter les éléments d'une manière étrange ou à créer beaucoup de requêtes multimédias, etc.

Maintenant que nous connaissons la différence la plus importante entre Flexbox et CSS Grid, commençons à en savoir plus sur CSS Grid et comprenons pourquoi ce système de mise en page est si puissant et innovant.

CSS Grid

Lorsque nous utilisons Flexbox, nous avons un système de mise en page unidimensionnel – cela signifie que nous ne pouvons pas créer de lignes ou de colonnes personnalisées par exemple. La beauté de CSS Grid est qu’il s’agit d’un système de mise en page à deux dimensions ce qui signifie que nous pouvons créer autant de colonnes ou de lignes que nous le souhaitons, et que nous pouvons avoir des dispositions différentes si nous le voulons. Maintenant, comprenons les bases de CSS Grid et ses propriétés, et voyons comment les choses fonctionnent dans ce nouveau système de mise en page.

display: grid

La première et principale chose que nous devons comprendre est que si nous voulons utiliser CSS Grille sur notre page ou dans un élément spécifique, il suffit de passer display: grid à cet élément:

 display :  grid ; 

By en passant un display: grid à notre élément, nous définissons cet élément comme un nouveau conteneur de grille. On peut aussi passer display: inline-grid pour créer une nouvelle grille. Après l'avoir transmis, vous pouvez maintenant créer des colonnes ou des lignes à l'intérieur de cet élément.

 display :  inline-grid ; 

Grid Columns & Grid Rows

Après avoir tourné votre élément dans un nouveau conteneur de grille, vous devrez spécifier le nombre de colonnes et de lignes que vous souhaitez. Tout d'abord, pour créer des colonnes dans CSS Grid, nous utilisons la syntaxe suivante:

 grid-template-columns :   200  px  200  px ; 

Dans la ligne ci-dessus, nous avons créé deux colonnes de même taille. Maintenant, pour créer des lignes, comme vous pouvez le deviner, c'est presque la même chose:

 grid-template-rows :   300  px  300  px ; [19659023] Dans la ligne ci-dessus, nous avons créé deux lignes de même taille. Une bonne chose ici est que vous pouvez y passer beaucoup de valeurs et d'unités, et vous pouvez également les mélanger. Imaginons que nous voulions créer 3 lignes, l'une avec 25%, l'autre avec 400px, et la dernière avec 1fr (une nouvelle unité CSS): 

 grid-template-rows :   25% [19659030] 400  px  1  fr ; 
 Une autre fonctionnalité intéressante que nous pouvons utiliser lors de la création de nos lignes ou colonnes est la fonction CSS de répétition  . Cette fonction peut être utilisée pour représenter un fragment répété de la tracklist, ce qui signifie que nous pouvons répéter autant de colonnes ou de lignes que nous le voulons sans avoir à écrire beaucoup de code.
 Imaginons que nous voulons qu'un élément de grille ait 12 colonnes - comment ferions-nous cela? Nous pouvons utiliser la fonction CSS  Repeat comme ceci:
 grid-template-columns :   repeat  ( 12  50  px ) ; 
 Maintenant, notre élément est devenu une grille! Maintenant que nous connaissons les bases de CSS Grid, créons une page simple en utilisant CSS Grid pour voir la puissance derrière elle.
 Commençons par créer la structure HTML suivante:
 < div   className [19659052] =  " firstGrid "  > 
 < div   className  =  " one "   /> 
 < div   className  =  " two "   /> 
 < div   className  =  " trois "   /> 
 </  div >  
 Maintenant, donnons du style au  élément firstGrid . Cet élément aura le style suivant:
 width: 600px;
hauteur: 300px;
align-self: centre;
se justifier: centre;
justify-content: centre;
align-items: centre;
fond: rouge;
rayon de la bordure: 6px;
 Comme vous pouvez le voir, cet élément n'est pas encore un conteneur de grille. Transformons cet élément en un conteneur de grille, et cet élément spécifique aura trois colonnes de la même taille chacune, et une seule ligne. Voici comment procéder:
 display: grid;
grille-modèle-colonnes: répéter (3, 1fr);
lignes de modèle de grille: 1fr;
 Maintenant, notre élément est un conteneur de grille, comportant trois colonnes de même taille et une seule ligne. Maintenant, donnons quelques CSS pour les divs enfants à l'intérieur de l'élément  firstGrid .
 .one ,
 .deux ,
 .three   {
   width :   200  px ; 
   height :   200  px ; 
   border-radius :   6  px ; 
} 

 .one   {
   background :  jaune ; 
} 

 .two   {
   fond :  violet ; 
} 

 .three   {
   background :  chartreuse ; 
} 
 Maintenant, vous devriez avoir un élément avec trois divs enfants à l'intérieur, avec trois colonnes de même taille chacune, et une seule ligne. Si vous ouvrez les outils de développement et allez dans Inspecter l'élément, vous pouvez voir ce qui se passe à l'intérieur de cet élément, combien de lignes ou de colonnes il contient, etc.
 
 Mais vous vous demandez peut-être maintenant:  «Comment puis-je positionner les éléments comme je le souhaite, sans avoir à suivre l’ordre HTML?»  Par exemple, si nous voulons positionner les  trois  div sur la première colonne, comment ferions-nous
 Lorsque vous utilisez CSS Grid, si vous souhaitez positionner des éléments dans un ordre spécifique, vous pouvez utiliser les  grid-column-start  et  grid column-end  pour positionner l'élément dans une colonne spécifique, et  grid-row-start  et  grid-row-end  pour le positionner dans une ligne spécifique.
 Par exemple, si nous voulions pour positionner les  trois  div dans la première colonne, il suffit d'aller dans le CSS trois div, et de mettre le code suivant:
 .three   {
 grille-ro w-start :   1 ; 
 grid-row-end :   2 ; 
 background :  chartreuse  ; 
} 
 Nous pouvons positionner des éléments dans la mise en page comme nous le voulons. C'est un système de mise en page si puissant et ouvre de nombreuses possibilités pour de nouvelles conceptions.
 Une autre fonctionnalité géniale que nous avons dans CSS Grid est l'écart entre les colonnes et les lignes. Si nous voulons avoir un peu d'espace entre les lignes ou les colonnes, nous pouvons utiliser le  grid-column-gap  ou  grid-row-gap .
 grid-column-gap [19659022]:   15  px ; 
 Ceci est juste un guide et une introduction à CSS Grid. Vous en apprendrez beaucoup plus en l'appliquant quotidiennement et en créant d'autres types de mises en page. À l'heure actuelle, CSS Grid est le système de mise en page le plus puissant pour le Web. Les navigateurs le supportent depuis un certain temps, et de nombreuses entreprises et développeurs commencent à l'utiliser dans leurs projets au lieu de Flexbox.
 Comme je l'ai dit plus tôt, la plupart du temps, lorsque vous utilisez CSS Grid, vous finissent par utiliser une Flexbox dans votre code. C'est tout à fait bien et une décision vraiment intelligente, car lorsque vous utilisez CSS Grid, vous devrez faire certaines choses que vous avez l'habitude de faire avec Flexbox.
 Conclusion
 Dans cet article, nous avons appris le CSS Grid et son pouvoir de créer des mises en page belles et impressionnantes sur le Web de nos jours, et comment nous pouvons en tirer profit dans nos applications puisque presque tous les navigateurs prennent en charge CSS Grid. Nous avons également appris un peu plus sur Flexbox et les différences entre Flexbox et CSS Grid. Vous pouvez commencer à créer de nombreuses mises en page différentes dès maintenant en utilisant simplement CSS Grid, mais cela ne signifie pas que vous devez arrêter d'utiliser Flexbox, car la plupart du temps, lorsque vous utilisez CSS Grid, vous aurez besoin de certaines fonctionnalités de Flexbox au centre. ou aligner des éléments.