Dans cet article, nous allons voir la grille CSS en action en créant une mise en page de site Web multi-colonnes réactive.

CSS Grid est une nouvelle tendance en matière de développement Web. Oubliez les dispositions de tables et les flottants: une nouvelle façon de concevoir des sites Web est déjà là! Cette technologie introduit des grilles bidimensionnelles qui définissent plusieurs zones de mise en page avec une poignée de règles CSS.

La grille peut rendre redondants des cadres tiers tels que 960gs ou comme vous pouvez facilement tout faire vous-même! Cette fonctionnalité est prise en charge par tous les principaux navigateurs bien qu’Internet Explorer implémente une version antérieure de la spécification. avec un en-tête, une zone de contenu principale, une barre latérale à droite, une liste de sponsors et un pied de page:

Un autre développeur a déjà tenté de résoudre ce problème avec une solution qui implique des flotteurs, display: table et quelques hacks de clearfix. Nous allons nous référer à cette mise en page existante comme étant "initiale":

Voir le stylo SP: disposition multi-colonnes avec des flotteurs par SitePoint ( @SitePoint ) sur CodePen .

Jusqu'à récemment, les flottants étaient considérés comme la meilleure option pour créer de telles dispositions. Avant cela, nous devions utiliser des tableaux HTML, mais ils présentaient un certain nombre de inconvénients. Spécifiquement, un tel agencement de table est très rigide, nécessitant beaucoup d'étiquettes ( table tr td th etc.), et sémantiquement ces balises sont utilisées pour présenter des données de table, pas pour concevoir des mises en page.

Mais CSS continue d'évoluer, et maintenant nous avons CSS Grid. Conceptuellement, cela ressemble à une ancienne disposition de table mais peut utiliser des éléments HTML sémantiques avec une disposition plus flexible.

Planning the Grid

Tout d'abord, nous devons définir une structure HTML de base pour notre document. Avant cela, parlons brièvement du fonctionnement de l'exemple initial. Il a les blocs principaux suivants:

• .container est le wrapper global qui a de petites marges à gauche et à droite.
• .main-header est l'en-tête qui contient le .logo (occupant 20% de l'espace, flottant à gauche) et le .main-menu (occupant 79% de l'espace, flottant à droite). L'en-tête se voit également attribuer un correctif pour effacer les éléments flottants.
• .content-area-wrapper enveloppe la zone principale .content (occupant 66,6% de l'espace moins 1rem réservée à la marge, flottant à gauche) et à la .sidebar (occupant 33,3% de l'espace, flottant à droite). Le wrapper lui-même est également associé à un correctif.
• .sponsors-wrapper contient les logos des sponsors. À l'intérieur, il y a une section .sponsors avec la propriété display définie sur table . Chaque sponsor, à son tour, est affiché sous forme de cellule de tableau.
• .footer est notre pied de page et couvre 100% de l'espace.

Notre nouvelle présentation sera très similaire à l'initiale, mais avec une exception: nous n’ajouterons pas les wrappers .main-header et .content-area-wrapper car les clearfix ne seront plus nécessaires. Voici la nouvelle version du HTML:

  

    
 DemoSite 
  

  

  

    
 Bienvenue! 

    

       Contenu
    
  

  

  

    
 Nos sponsors 

    

      

        
      

      

        
      

      

        
      

      

        
      

      

        
      
    

  

  

Notez que vous pouvez utiliser le corps en tant que .container global ; c'est juste une question de préférence dans ce cas. Dans l'ensemble, nous avons six domaines principaux:

1. Menu
2. Menu
3. Contenu principal
4. Encadré
5. Sponsors
6. Pied de page

Il est généralement recommandé de mettre en œuvre une approche mobile. En d'autres termes, vous commencez à partir de la mise en page mobile, puis vous ajoutez des styles pour des écrans plus grands. Cela n'est pas nécessaire dans ce cas, car nous adaptons une disposition initiale qui est déjà en train de revenir à une vue linéarisée sur des appareils à petit écran. Commençons donc par nous concentrer sur la mise en œuvre de la grille, puis sur la réactivité et les règles de repli. Donc, revenons à notre schéma et voir comment les colonnes de la grille peuvent être arrangées:

Je propose donc d'avoir trois colonnes (surlignées en rouge) et quatre ). Certaines zones, comme le logo, n'occuperont qu'une seule colonne, tandis que d'autres, comme le contenu principal, couvriront plusieurs colonnes. Plus tard, nous pouvons facilement modifier la disposition, déplacer les zones ou en ajouter de nouvelles.

En suivant le schéma, attribuez un nom unique à chaque zone. Ceux-ci seront utilisés dans la mise en page définie ci-dessous:

 .logo {
  zone de grille: logo;
}

.menu principal {
  zone de grille: menu;
}

.zone de contenu {
  zone de grille: contenu;
}

.sidebar {
  zone de grille: barre latérale;
}

.sponsors-wrapper {
  zone de grille: sponsors;
}

.bas de page {
  zone de grille: pied de page;
}

Définissez maintenant la propriété display sur la grille définissez trois colonnes et ajoutez de petites marges à gauche et à droite du conteneur principal:

 .container {
  affichage: grille;
  marge: 0 2rem;
  grille-modèle-colonnes: 2fr 6fr 4fr;
}

display: grid définit un conteneur de grille et définit un contexte de formatage spécial pour ses enfants. fr est une unité spéciale qui signifie "fraction de l'espace libre du conteneur de grille". 2 + 6 + 4 nous donne 12 et 6/12 = 0,5 . Cela signifie que la colonne du milieu va occuper 50% de l'espace libre.

J'aimerais aussi ajouter un espacement entre les lignes et les colonnes:

 .container {
  // ...
  écart de grille: 2em 1rem;
}

Après cela, nous pouvons travailler avec des domaines individuels. Mais avant de terminer cette section, ajoutons rapidement quelques styles communs:

 * {
  box-sizing: border-box;
}

html {
  taille de la police: 16px;
  font-family: Georgia, serif;
}

corps {
  couleur d'arrière-plan: #fbfbfb;
}

h1, h2, h3 {
  margin-top: 0;
}

en-tête h1 {
  marge: 0;
}

main p {
  margin-bottom: 0;
}

Bien! Nous pouvons maintenant passer à la première cible, qui sera l’en-tête.

Notre en-tête occupe la première ligne qui doit avoir une hauteur spécifique de 3rem . Dans la mise en page initiale, ceci est résolu en affectant la propriété height à l'en-tête de l'en-tête:

 .main-header {
  hauteur: 3rem;
}

Notez également que le logo et le menu sont alignés verticalement au milieu, ce qui est obtenu à l'aide de l'astuce line-height :

 .logo {
  // ...
  hauteur: 100%;
  hauteur de ligne: 3rem;
}

Avec CSS Grid, cependant, les choses vont être plus simples: nous ne nécessiterons pas de hacks CSS.

Commencez par définir la première ligne:

 .container {
  // ...
  grid-template-rows: 3rem;
}

Notre logo ne devrait occuper qu'une seule colonne, alors que le menu devrait couvrir deux colonnes. Nous pouvons exprimer notre intention à l'aide de la propriété grid-template-areas qui fait référence aux noms de grid-area attribués ci-dessus:

 .container {
  // ...
  zones de grille-modèle:
    "menu du menu logo";
}

Que se passe-t-il ici? Eh bien, en disant logo une seule fois, nous nous assurons qu'il occupe seulement une – la colonne la plus à gauche. Le menu de signifie que le menu occupe deux colonnes: celle du milieu et celle de droite. Voyez à quel point cette règle est simple!

Alignez maintenant le logo sur l'axe Y:

 .logo {
  zone de grille: logo;
  align-self: centre;
}

Le menu devrait être centré verticalement et tiré à droite:

 .main-menu {
  zone de grille: menu;
  align-self: centre;
  justifier soi-même: fin;
}

Notre menu est construit avec les balises ul et li . Aussi, modifions-les un peu en supprimant les marqueurs, en annulant les marges / marges et en définissant le menu sur un conteneur flexible. :

 .main-menu ul {
  marge: 0;
  remplissage: 0;
  affichage: flex;
}

.main-menu__item {
  list-style-type: none;
  remplissage: 0;
  taille de la police: 1.1rem;
  margin-right: 0.5rem;
}

.main-menu .main-menu__item: last-of-type {
  margin-right: 0;
}

C'est à peu près tout. Pour observer le résultat, je vais utiliser Firefox avec un outil de surligneur CSS Grid très pratique. (Il existe des outils similaires pour les autres navigateurs: par exemple, Gridman pour Chrome.) Pour accéder à cet outil, appuyez sur F12 et sélectionnez le .container element, qui devrait avoir une grille label:

Après cela, passez à l'onglet Règles CSS et recherchez l'affichage : grille propriété. En appuyant sur la petite icône en regard de la grille valeur vous pouvez activer ou désactiver le surligneur:

Voici le résultat:

Le surligneur affiche toutes vos lignes et colonnes, ainsi que les marges entre elles et les noms des zones. Vous pouvez personnaliser la sortie dans la section Layout, qui répertorie également toutes les grilles de la page:

Nous avons donc traité l'en-tête. la zone de contenu principale et la barre latérale.

Contenu principal et barre latérale

Notre zone de contenu principale doit couvrir deux colonnes, tandis que la barre latérale ne doit en occuper qu'une. En ce qui concerne la ligne, j'aimerais que sa hauteur soit réglée automatiquement. Nous pouvons mettre à jour la grille .container en conséquence:

 .container {
  // ...
  grid-template-rows: 3rem auto;
  zones de grille-modèle:
          "menu du menu logo"
          "barre latérale du contenu";
}

Je voudrais ajouter un peu de remplissage pour la barre latérale pour lui donner plus d'espace visuel:

 .sidebar {
  zone de grille: barre latérale;
  padding: 1rem;
}

Voici le résultat, affiché dans l'outil Grille de Firefox:

La section sponsors doit contenir cinq éléments de largeur et de hauteur égales. Chaque article, à son tour, aura une image.

Dans la mise en page initiale, ce bloc porte le nom de display: table mais nous ne nous y fierons pas. En fait, la section des sponsors peut aussi être un bon candidat pour appliquer la grille CSS!

Tout d'abord, modifiez les zones de grille-modèle pour inclure la zone sponsors : [19659044] .container {
  // …
  zones de grille-modèle:
          "menu du menu logo"
          "barre latérale du contenu"
          "sponsors sponsors sponsors"
}

Tournez maintenant la section .sponsors dans une grille également:

 .sponsors {
  affichage: grille;
}

Tant que nous avons besoin de cinq éléments de même largeur, une fonction répétition peut être utilisée pour définir les colonnes:

 .sponsors {
  affichage: grille;
  grid-template-columns: repeat (5, 1fr);
}

Quant à la ligne, sa hauteur doit être définie automatiquement. L'écart entre les colonnes doit être égal à 1rem :

 .sponsors {
  affichage: grille;
  grid-template-columns: repeat (5, 1fr);
  grid-template-rows: auto;
  gap-colonne-gap: 1rem;
}

Style chaque article:

 .sponsor {
  margin-left: 0;
  margin-right: 0;
  couleur d'arrière-plan: #fff;
  rayon de bordure: 0.625rem;
}

Voici le résultat intermédiaire:

Cet exemple montre que vous pouvez imbriquer des grilles sans aucun problème. Une autre solution pourrait être d'utiliser Flexbox, mais dans ce cas, les sponsors peuvent les emballer si leur largeur est insuffisante.

Maintenant, j'aimerais centrer les images verticalement et horizontalement. Nous pourrions essayer de faire ce qui suit:

 .sponsor {
  place-self: centre;
}

place-self aligne l'élément sur les axes X et Y. C'est une propriété raccourcie à align-self et justification-self .

Les images seront en effet alignées, mais malheureusement le fond blanc a disparu. En effet, chaque .sponsor a maintenant la largeur et la hauteur égales aux dimensions de l'image:

ici, et l’une des solutions possibles est d’utiliser Flexbox:

 .sponsor {
  // ...
  affichage: inline-flex;
  align-items: centre;
  justifie le contenu: centre;
}

Maintenant, tout est affiché correctement et maintenant nous savons que Grid joue bien avec Flexbox:

Notre dernière section est le bas de page. Tout ce que nous avons à faire est de l'étendre aux trois colonnes:

 .container {
  // ...
  zones de grille-modèle:
          "menu du menu logo"
          "barre latérale du contenu"
          "sponsors sponsors sponsors"
          "footer footer footer";
}

En gros, la mise en page est terminée! Cependant, nous n'avons pas encore fini: le site doit également être réactif. Donc, prenons soin de cette tâche dans la section suivante.

Responsive de la structure

Avec CSS Grid en place, il est très facile d'introduire la réactivité, car nous pouvons rapidement repositionner les zones.

Grands écrans

Commençons par de grands écrans (dans cet article, je m'en tiendrai aux mêmes points d'arrêt définis dans Bootstrap 4 ). Je voudrais diminuer la marge horizontale du conteneur principal et l'écart entre les sponsors individuels:

 @media all et (max-width: 992px) {
  .récipient {
    marge: 0 1rem;
  }

  .sponsors {
    gap-column-gap: 0.5rem;
  }
}

Écrans moyens

Sur les écrans moyens, j'aime que la zone de contenu principale et la barre latérale occupent les trois colonnes:

 @media all et (max-width: 768px) {
  .récipient {
    zones de grille-modèle:
            "menu du menu logo"
            "contenu contenu contenu"
            "sidebar sidebar sidebar"
            "sponsors sponsors sponsors"
            "footer footer footer";
  }
}

Réduisons également la taille de la police et empilons les sponsors afin qu'ils soient affichés les uns sous les autres. L'écart entre les colonnes doit être nul (car il n'y aura qu'une seule colonne). Au lieu de cela, je définirai un espace entre les lignes:

 @media all et (max-width: 768px) {
  // ...
  html {
    taille de police: 14px;
  }

  .sponsors {
    colonnes-modèle-grille: 1fr;
    gap-colonne-gap: 0;
    gap-row-gap: 1rem;
  }
}

Voici comment la disposition se présente sur les écrans de taille moyenne:

Petits écrans

Sur les petits écrans, nous allons afficher chaque zone sur un écran ligne séparée, ce qui signifie qu'il n'y aura plus qu'une colonne:

 @media all et (max-width: 540px) {
  .récipient {
    colonnes-modèle-grille: 1fr;
    grid-template-rows: auto;
    zones de grille-modèle:
            "logo"
            "menu"
            "contenu"
            "sidebar"
            "sponsors"
            "bas de page";
  }
}

Le menu ne doit pas être tiré à droite dans ce cas, et nous n'avons pas non plus besoin de l'écart entre les colonnes:

 @media all et (max-width: 540px) {
  .récipient {
    // ...
    écart de grille: 2rem 0;
  }

  .menu principal {
    justifier soi-même: commencer;
  }
}

Le travail est terminé:

Notez que vous pouvez même réorganiser facilement les éléments de grille pour différents écrans. Supposons que nous souhaitons placer le menu en bas sur de petits écrans (afin que les visiteurs n'aient pas à faire défiler la liste une fois qu'ils ont fini de lire les informations sur la page). Pour ce faire, ajustez simplement les zones de grille-modèle :

 @media all et (max-width: 540px) {
  .récipient {
    // ...
    zones de grille-modèle:
            "logo"
            "contenu"
            "sidebar"
            "sponsors"
            "bas de page"
            "menu";
  }
}

Faire des requêtes sans support

Il est important de mentionner que nous pouvons faire en sorte que les sponsors soient réactifs sans aucune question des médias. Ceci est possible avec l'aide de la fonction auto-fit et minmax . Pour les voir en action, modifiez les styles pour les .sponsors comme ceci:

 .sponsors {
  // ...
  grid-template-columns: repeat (remplissage automatique, minmax (200px, 1fr));
}

La fonction repeat comme vous le savez déjà, répète les colonnes autant de fois que nécessaire.

auto-fill signifie "remplir la ligne avec autant de colonnes que possible ". S'il n'y a pas assez d'espace pour la colonne, elle sera placée à la ligne suivante.

minmax nous permet de spécifier la valeur minimale et maximale pour les largeurs des colonnes. Dans ce cas, chaque colonne doit s'étendre sur une fraction d'espace libre, mais pas moins de 200 pixels.

Tout cela signifie que sur des écrans plus petits, les colonnes peuvent être réduites au maximum à 200px chacune. S'il n'y a toujours pas assez d'espace, une ou plusieurs colonnes seront déplacées sur une ligne distincte. Voici le résultat de l'application des règles CSS ci-dessus:

Fallbacks

Malheureusement, CSS Grid n'est pas encore pris en charge par tous les navigateurs. peut deviner lequel est toujours en train d'implémenter une ancienne version de la spécification. Oui, ce sont Internet Explorer 10 et 11. Si vous ouvrez la démo dans ces navigateurs, vous verrez que la grille ne fonctionne pas du tout, et les zones sont simplement empilées:

Bien sûr, ce n'est pas la fin du monde, car le site est toujours utilisable, mais ajoutons au moins quelques règles de repli. La bonne nouvelle est que si l'élément est flottant et a aussi une grille attribuée, la grille a priorité . En outre, l'affichage vertical-align et certaines autres propriétés n'ont pas non plus d'effet sur les éléments de grille profitons donc de ce fait.

Le menu empilé est agréable en soi, mais la barre latérale doit probablement être placée à côté du contenu principal, pas en dessous. Nous pouvons y parvenir en utilisant display: inline-block :

 .content-area {
  display: inline-block;
  alignement vertical: top;
}

.sidebar {
  display: inline-block;
  alignement vertical: top;
}

Dans tous les navigateurs qui prennent en charge la grille, ces propriétés n'auront aucun effet, mais dans IE, elles seront appliquées comme prévu. Une autre propriété que nous devons modifier est la largeur :

 .content-area {
  largeur: 69%;
  display: inline-block;
  alignement vertical: top;
}

.sidebar {
  largeur: 30%;
  display: inline-block;
  alignement vertical: top;
}

Mais après avoir ajouté ces styles, la disposition de notre grille sera désormais bien pire, car la propriété width n'est pas ignorée par les éléments de grille. Cela peut être corrigé à l'aide de la requête CSS @supports . IE ne comprend pas ces requêtes mais il n'est pas nécessaire de le faire: nous allons l'utiliser pour corriger la grille!

 @supports (display: grid) {
  .content-area, .sidebar {
    width: auto;
  }
}

Maintenant, prenons soin des objets sponsor et ajoutez une marge supérieure pour chaque bloc:

 .sponsor {
  alignement vertical: milieu;
}

.main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer {
  margin-top: 2rem;
}

Nous n'avons pas besoin de marge supérieure lorsque la grille est prise en charge, alors annulez-la dans la requête @supports :

 @supports (display: grid) {
  // ...
  .main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer, .sponsor {
    margin-top: 0;
  }
}

Enfin, ajoutons une certaine réactivité pour IE. Nous allons simplement étirer le contenu principal, la barre latérale et chaque sponsor sur des écrans plus petits:

 @media all et (max-width: 760px) {
  .content-area, .sidebar {
    bloc de visualisation;
    largeur: 100%;
  }

  .sponsor {
    largeur: 100%;
    margin-top: 1rem;
  }
}

N'oubliez pas de fixer la largeur du sponsor pour les navigateurs supportant la grille:

 @supports (display: grid) {
  // ..

  .sponsor {
    width: auto;
  }
}

Voici comment la disposition ressemble à Internet Explorer maintenant:

Vous pouvez voir le résultat sur CodePen:

Voir le stylo SP : Disposition multi-colonne avec grille par SitePoint ( @SitePoint ) sur CodePen .

Conclusion

Dans cet article, nous avons vu CSS Grid en action et l’a utilisé pour repenser une disposition existante basée sur un flotteur. En comparant ces deux solutions, nous pouvons voir que le code HTML et CSS de la solution "grid" est plus petit (sans compter les replis, bien sûr), plus simple et plus expressif. Avec l'aide de la propriété grid-template-areas il est facile de comprendre comment des zones individuelles sont disposées et nous pouvons les repositionner rapidement ou ajuster leur taille. En plus de cela, nous n'avons pas besoin de faire appel à des trucs de hacky comme clearfix.

Donc, comme vous le voyez, CSS Grid est une excellente alternative aux floats, et il est très prêt pour la production. Vous devrez peut-être fournir des règles de secours pour Internet Explorer (qui implémente une version antérieure de la spécification), mais comme vous l’avez vu, elles ne sont pas très complexes et, en général, le site est toujours utilisable sans compatibilité arrière.

Avez-vous déjà essayé de créer des sites Web avec CSS Grid? Quelles sont vos impressions? Partagez vos impressions dans les commentaires!

Ilya Bodrov est professeur d'informatique, ingénieur principal chez Campaigner LLC, auteur et assistant pédagogique chez Sitepoint et chargé de cours à l'Institut d'aviation de Moscou. Ses principaux langages de programmation sont Ruby (avec Rails) et JavaScript. Il aime coder, enseigner aux gens et apprendre de nouvelles choses. Ilya possède également des certificats Cisco et Microsoft et travaillait en tant que tuteur dans un centre de formation pendant quelques années. Pendant son temps libre, il tweete, écrit des articles pour son site Web participe à des projets OpenSource, se lance dans le sport et joue de la musique.