Tuto Css grid 1/2

Firefox vous aide pour concevoir des grilles
Tout d'abord, je vous conseil d'utiliser Firefox. Ce navigateur vous permettra de bien visualier la grille que vous avez mis en place. Sur une page où il y a une grille, ouvrez l'inspecteur et cliquez sur l'icone "grille". Vous voyez les limites de la grille et le gap, l'espace entre les colonnes et les lignes de la grille : c'est bien utile !



Une grille toute simple pour commencer
Nous allons créer une grille avec 3 colonnes identiques.
Voici le style qui permet de définir la grille.
<style>
   .wrapper{
      display : grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap:10px;
   }
</style>
3 lignes de css suffisent pour créer la grille. La grille est définie sur la première ligne display : grid Sur la seconde ligne nous indiquons l'espace reservé pour chaque colonne. 1fr signifie : une fraction. Nous avons 3 colonnes d'une fraction 1fr 1fr 1fr. Enfin, sur la dernière ligne, un écart de 10 pixels est ajouté : grid-gap:10px;

Et voici le code html :
<div class="wrapper">
   <div>UN - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, consequuntur? </div>
   <div>DEUX - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, consequuntur?</div>
   <div>TROIS - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, consequuntur?</div>
   <div>QUATRE - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, consequuntur?</div>
</div>
Les div contenus dans la div parent de classe "wrapper" s'insérent naturellement dans la grille.Quand les trois premières colonnes sont complètes, la div suivante vient se placer sur une deuxième ligne.

Voir la page




Modifions cette première grille
Pour changer la taille des colonnes rien de plus simple :
   grid-template-columns: 1fr 2fr 1fr;
la première colonne occupe maintenant 25% de l'espace disponible, la deuxième 50% et enfin la dernière les 25% restants.

Voir la page





Positionner les div dans la grille
Nous avons vu que les div enfants se positionnent les uns à la suite des autres, en occupant tout à tous chaque colonne disponible. Nous allons maintenant ordonner aux div de se placer différment en gardant la grille de l'exemple précédent 1fr 2fr 1fr

Nous ajoutons la classe "un" à la première div et nous allons afficher son contenu dans les 3 colonnes en haut de la page
   .un {
      grid-column: 1 / 4 ;
      grid-row: 1;
   }
On indique où la colonne commence et ou elle s'arrete avec grid-column selon la numérotation donnée par l'image ci-dessous.
Nous ajoutons, les classes deux et trois sur les 2 autres div, et on se sert de la même numérotation pour placer la div .deux. Il est même possible de placer la div 3 avant la 2 en la placant sur la première colonne.
   .deux { 
      grid-column: 2 / 4 ;
      grid-row: 2;
   }
   .trois{
      grid-column: 1;
      grid-row: 2;
   }
Voir la page




Ajouter des lignes dans la grille
La même logique qui nous a servi à créer les colonnes de la grille, s'applique pour les lignes.
Créons une première ligne de 2fr, puis une seconde ligne moitié moins haute 1fr.
grid-template-rows : 2fr 1fr;
Voir la page

A quelle hauteur correspond 1fr ?
Cette hauteur est dynamique, elle évolue en fonction du contenu présent dans chaque ligne. Quelque soit la quantité de texte mise dans une cellule de la grille, le rapport entre les fr sera toujours identique. Dans notre exemple : la première ligne sera toujours 2 fois plus haute que la seconde ligne. Nous utilisons le même code pour l'exemple ci-dessous :
grid-template-rows : 2fr 1fr;
Utilisez les boutons à droite (ci-dessous) pour ajouter du texte afin de voir comment se comportent les lignes.

cadre un   Cette ligne = 2fr
cadre deux
cadre trois   Cette ligne = 1fr
cadre quatre
Ajouter du texte dans le cadre 2
Supprimer texte du cadre 2
Ajouter du texte dans le cadre 4
Supprimer texte du cadre 4


Ajouter des hauteurs de lignes fixes
Plus simple, nous pouvons définir des lignes de hauteur fixe, en indiquant une hauteur en pixels.
grid-template-rows : 150px 300px;
Voir la page
Vous constatez que si il y a trop de texte, il déborde.

Voir la suite





La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar