Une introduction au module de mise en forme de grille CSS –

Cet article a été mis à jour en juillet 2018 pour refléter l'amélioration de la prise en charge de la grille CSS par les navigateurs

Les applications Web devenant de plus en plus complexes, nous avons besoin d'une solution plus naturelle. et d'autres techniques moins lourdes. Une nouvelle solution excitante pour créer des mises en page est fournie avec le CSS Grid Layout Module .

Dans ce tutoriel d'introduction, je vais vous présenter cette nouvelle fonctionnalité CSS, je parlerai de la prise en charge actuelle du navigateur. et je vais vous montrer en utilisant quelques exemples du fonctionnement du module CSS Grid Layout Module

Qu'est-ce que le CSS Layout Module?

L'idée de base de la Grid Layout est de diviser une page web en colonnes et en lignes. avec la possibilité de positionner et de dimensionner les éléments du bloc de construction en fonction des lignes et des colonnes que nous avons créées en termes de taille, de position et de calque.

La grille nous donne également un moyen flexible de changer la position des éléments sans aucun changement au HTML. Cela peut être utilisé avec des requêtes média pour modifier la disposition à différents points d'arrêt

Browser Support

Avant de pouvoir plonger plus dans la grille, il est important de regarder l'état du support du navigateur

Support dans les navigateurs modernes

Comme vous pouvez le voir sur l'image ci-dessus, CSS Grid est supporté par la dernière version de la plupart des navigateurs.

Si vous cliquez sur l'option Afficher tout sur Puis-je utiliser, vous verrez à quelle distance se trouve ce support. Parce que Grid est une nouvelle fonctionnalité, la rétrocompatibilité ne s'étend pas loin, donc vous devez garder cela à l'esprit si votre public utilise une ancienne version d'un navigateur majeur.

Cependant, en survolant chaque numéro de version sur Puis-je utiliser indique le taux d'utilisation global pour cette version. Au moment de l'écriture, la dernière version pour chaque navigateur ne supportant pas Grid a une utilisation de beaucoup moins de un pour cent .

Internet Explorer … et d'autres navigateurs non supportés

La première proposition de Grid Layout a été développé par Microsoft et IE10 livré avec une implémentation préfixée -ms . Si vous jetez un coup d'oeil au support sur Puis-je utiliser vous verrez que IE10 et IE11 supportent CSS Grid … avec la mise en garde qu'ils ne supportent que l'ancienne version de la spécification. Bummer. Cela ne va pas changer. Mais ce qui va changer, c'est l'utilisation de ces navigateurs. En juillet 2018, l'utilisation d'IE11 est tombée à environ 2% globalement, et l'utilisation d'IE10 est environ un dixième de pour cent.

Puis-je utiliser indique également que quelques autres navigateurs ne supportent pas la disposition de grille. Ceux-ci incluent Opera Mini et Blackberry Browser. Opera Mini est le seul à avoir un usage important, mais comme il s'agit d'un navigateur mobile, il est très probable que vous souhaitiez le cibler avec une mise en page sans grille et compatible avec les mobiles

Étant donné que la grande majorité des navigateurs utilisés aujourd'hui prennent en charge CSS Grid, il est dommage de ne pas l'utiliser parce que certains navigateurs ne le supportent pas. Il existe différentes options pour utiliser Grid et fournir des solutions de repli parfaitement adaptées aux navigateurs non compatibles.

L'option la plus simple consiste peut-être à fournir une mise en page simple en «premier mobile». Cela sera parfaitement approprié pour les appareils mobiles qui ne supportent pas la grille et les navigateurs de bureau comme IE.

Une autre option consiste à utiliser des solutions de remplacement et de remplacement plus sophistiquées pour produire des résultats similaires à ceux de Grid. .

Et un polyfill est également disponible pour fournir une implémentation fonctionnelle du module Grid aux navigateurs qui ne le supportent pas nativement. Notez que cela peut être un peu obsolète maintenant.

Exemple de disposition de grille

Commençons par un exemple pour voir la puissance de la disposition de la grille, puis j'expliquerai de nouveaux concepts plus en détail. [19659006] Imaginez que vous souhaitiez créer une application Twitter avec une mise en page de quatre colonnes pleine hauteur (Tweets, Réponses, Recherche et Messages), quelque chose d'abstrait et semblable à la capture d'écran ci-dessous.

Voici notre code HTML:

  
 Tweets 
  
 Les réponses 
  
 Parcourir 
  
 Messages 

Ensuite, nous allons appliquer quelques CSS aux .app-layout conteneur:

 .app-layout {
  affichage: grille; /* 1 */
  grid-template-columns: 1fr 1fr 1fr 1fr; / * 2 * /
  grid-template-rows: 100vh; / * 3 * /
} 

Voir une démo ici

Voici l'explication de ce que nous avons fait dans le précédent CSS:

1. Définissez la propriété d'affichage sur la grille .
2. ] Divisez l'élément conteneur en quatre colonnes, chaque colonne est 1fr (une fraction) de l'espace libre dans le conteneur de grille.
3. Créez une ligne et définissez la hauteur à 100vh (hauteur de la fenêtre d'affichage complète)

Comme vous pouvez le voir, le module Grid Layout ajoute une nouvelle valeur à la propriété display qui est grid . La valeur de la grille est responsable de la définition de l'élément .app-layout comme conteneur de grille, qui établit également un nouveau contexte de mise en forme de grille pour son contenu. Cette propriété est requise pour commencer à utiliser la disposition de la grille.

La propriété grid-template-columns spécifie la largeur de chaque colonne de la grille et, dans notre cas, elle divise le .app- disposition conteneur à quatre colonnes; chacun est 1fr (25%) de l'espace disponible

Le grid-template-rows spécifie la hauteur de chaque ligne de la grille, et dans notre exemple nous avons seulement créé un rangée à 100vh .

Une mise en page avec deux colonnes et deux lignes ressemblerait à ceci:

Et nous utiliserions le CSS suivant:

 .app-layout {
  affichage: grille;
  grid-template-columns: 1fr 1fr;
  grille-template-rows: 50vh 50vh;
} 

Voir une démo ici

Nous pouvons également réaliser l'exemple ci-dessus uniquement sur de petits écrans en enveloppant le code dans une requête multimédia. Cela ouvre une grande opportunité pour nous de personnaliser la mise en page différemment dans différentes fenêtres. Par exemple, nous pouvons créer la disposition précédente uniquement sur les fenêtres sous 1024px comme suit:

 @media screen et (max-width: 1024px) {
  .app-layout {
    affichage: grille;
    grid-template-columns: 1fr 1fr;
    grille-template-rows: 50vh 50vh;
  }
} 

Voir une démo ici

Concepts du module de mise en page de la grille

Maintenant que vous avez vu un exemple simple, il y a quelques nouveaux concepts que j'aimerais couvrir pour mieux comprendre la disposition de la grille. Bien qu'il y ait beaucoup de nouveaux concepts, j'en examinerai seulement quelques-uns

Grid Item
Les éléments de la grille sont les éléments enfants du conteneur de la grille. Dans l'exemple ci-dessus, les éléments .tweets et .replies seraient considérés comme des éléments de grille.

Lignes de quadrillage

Une ligne de grille est une ligne qui existe de chaque côté d'une colonne ou d'une rangée. Il existe deux ensembles de lignes de grille: un ensemble définissant des colonnes (l'axe vertical) et un autre ensemble définissant des lignes (l'axe horizontal).

De la capture d'écran ci-dessus, qui représente le premier exemple, j'ai créé quatre colonnes. 1fr chacun, ce qui nous donnera cinq lignes verticales. J'ai également créé une ligne, ce qui nous donne deux lignes horizontales

Voyons comment nous pouvons positionner un élément de la grille dans le conteneur de la grille

Positionner les éléments à l'aide d'un numéro de ligne

nombre dans une grille en utilisant les propriétés grid-column-start et grid-column-end . Nous donnons ensuite à ces propriétés les numéros de ligne de début et de fin.

En regardant l'exemple précédent, voici comment le navigateur positionne les éléments par défaut pour nous:

 .tweets {
  grille-début de colonne: 1;
  grille-colonne-fin: 2;
  grille-rangée: 1;
}

.réponses  {
  grille-début de colonne: 2;
  grille-fin de colonne: 3;
  grille-rangée: 1;
}

.chercher   {
  grille-début de colonne: 3;
  grille-fin de colonne: 4;
  grille-rangée: 1;
}

.messages {
  grille-début de colonne: 4;
  grille-fin de colonne: 5;
  grille-rangée: 1;
} 

En regardant le code de la colonne .tweet voici ce que font chacune des trois lignes du CSS:

1. Positionnez l'élément enfant à partir de la première ligne verticale sur la gauche.
2. Termine la position de l'élément à la deuxième ligne verticale
3. Positionne l'élément à l'intérieur de la ligne entière

Vous pouvez changer cela en changeant l'ordre des éléments avec des positions différentes, donc l'ordre des éléments sera: .recherche .réplies .messages et .tweets .

Et nous pouvons le faire comme suit:

 .tweets {
  grille-début de colonne: 4;
  grille-fin de colonne: 5;
  grille-rangée: 1;
}

.réponses {
  grille-début de colonne: 2;
  grille-fin de colonne: 3;
  grille-rangée: 1;
}

.chercher {
  grille-début de colonne: 1;
  grille-colonne-fin: 2;
  grille-rangée: 1;
}

.messages {
  grille-début de colonne: 3;
  grille-fin de colonne: 4;
  grille-rangée: 1;
} 

Nous pouvons également utiliser la propriété de raccourci grid-column pour définir les lignes de début et de fin sur une ligne:

 .tweets {
  grille-colonne: 4/5;
  grille-rangée: 1;
}

.réponses {
  grille-colonne: 2/3;
  grille-rangée: 1;
}

.chercher {
  grille-colonne: 1/2;
  grille-rangée: 1;
}

.messages {
  grille-colonne: 3/4;
  grille-rangée: 1;
} 

Voir une démo ici

Cela a changé la structure de mise en page avec seulement CSS alors que le balisage est toujours tel qu'il était sans aucun changement. C'est un énorme avantage d'utiliser le module Grid Layout. Nous pouvons réorganiser la disposition des éléments indépendamment de leur ordre de source, ainsi nous pouvons réaliser n'importe quelle disposition pour différentes tailles et orientations d'écran.

Positionner des éléments en utilisant des zones nommées

Une zone de grille est l'espace logique utilisé un ou plusieurs éléments de la grille. Nous pouvons nommer explicitement une zone de grille à l'aide de la propriété grid-template-areas puis nous pouvons placer un élément de grille dans une zone spécifique en utilisant la propriété grid-area . Pour rendre ce concept plus clair, reprenons l'exemple des quatre colonnes avec la colonne search placée en premier:

 .app-layout {
  affichage: grille;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-template-areas: "la recherche répond aux messages tweets";
} 

Dans la dernière ligne, nous divisons le conteneur de grille en quatre zones de grille nommées, chaque nom d'une colonne. L'étape suivante consiste à positionner chaque élément de la grille dans une zone nommée:

 .search {
  zone de grille: recherche;
}

.réponses {
  zone de grille: réponses;
}

.messages {
  zone de grille: messages;
}

.tweets {
  zone de grille: tweets;
} 

Voir une démo ici

Slack Example

Qu'en est-il de l'utilisation du module Grid Layout pour implémenter un exemple plus complexe, par exemple, la création des blocs de construction du Slack mise en page. Puisque nous parlons de mises en page, nous allons résumer et simplifier la conception Slack pour les blocs de construction représentés dans la grille. Quelque chose comme ça:

De cette disposition nous allons créer trois colonnes verticales, et trois lignes horizontales, et nous pouvons le visualiser en utilisant les lignes de la grille comme suit:

Voici le code HTML:

  
 Équipes 
  
 Equipes 
  
 Entêtes 
  

    

      
 
      
 
    
  
  

    
  

Et le CSS:

 .app-layout {
  affichage: grille;
  hauteur: 100vh;
  grid-template-columns: 100px 250px 1fr;
  grid-template-rows: auto 1fr auto;
} 

Ici, j'utilise la propriété grid-template-columns pour créer trois colonnes à 100px, 250px, et la troisième colonne occupe l'espace disponible restant. La dernière ligne crée trois lignes: Les première et troisième lignes avec la hauteur automatique tandis que la rangée du milieu occupe l'espace disponible restant.

Le reste du CSS ressemble à ceci:

 .teams {
  grille-colonne: 1;
  grille-rangée: 1/4;
}

.channels {
  grille-colonne: 2;
  grille-rangée: 1/4;
}

.entête {
  grille-colonne: 3;
  grille-rangée: 1;
}

.messages {
  grille-colonne: 3;
  grille-rangée: 2;
}

.contribution {
  grille-colonne: 3;
  grille-rangée: 3;
} 

Voir une démo ici

Nous pouvons également créer la mise en page en utilisant des zones nommées, que vous pouvez voir dans cette démo . ] Module de mise en page de grille vs Flexbox

Comme beaucoup d'entre vous ont commencé à utiliser Flexbox, vous vous demandez peut-être: Quand utiliser Flexbox et quand est-ce qu'il serait plus approprié d'utiliser Grid Layout?

une bonne explication de Tab Atkins :

Flexbox est approprié pour de nombreuses mises en page, et beaucoup d'éléments "composant de page", car la plupart d'entre eux sont fondamentalement linéaires. La grille est appropriée pour la mise en page globale, et pour les composants de page complexes qui ne sont pas linéaires dans leur conception.

Les deux peuvent être composés arbitrairement, donc une fois qu'ils sont largement supportés, je crois que la plupart des pages seront composées une grille externe pour la mise en page générale, un mélange de flexbox imbriqués et une grille pour les composants de la page, et enfin une disposition block / inline / table aux "feuilles" de la page, où le texte et le contenu vivent

Rachel Andrew dit :

Grid Layout pour la structure de la page principale des lignes et des colonnes

Flexbox pour la navigation, éléments de l'interface utilisateur, tout ce que vous pouvez linéariser

Je n'ai pas couvert tous les concepts de grille et syntaxe, donc je vous recommande de consulter les ressources suivantes pour aller plus loin:

Conclusion

Comme vous l'avez vu, le module CSS Grid Layout est puissant en raison de sa brièveté et le fait que vous avez le pouvoir de changer le ordre de mise en page sans toucher au balisage. Ces caractéristiques nous ont aidés à changer de façon permanente la façon dont nous créons des mises en page pour le web.

Ahmad Ajmi est un développeur débutant autodidacte passionné par le Web, l'open source et la programmation.