CSS Grid : Utilisation d’une grille pour aérer un menu

Cet article est le premier d’une série consacrée à l’utilisation de CSS en se basant sur des exemples concrets.

En effet, une fois les bases du CSS apprises, on se heurte vite à la difficulté de la mise en pratique. Le fait de répliquer diverses fonctionnalités de sites existants permettra de couvrir différents éléments, que ce soit les menus, la mise en page via Flex et CSS Grid, ou encore l’utilisation de ressources externes telles que les icônes de Font Awesome ou les fontes de Google Fonts.

Notre premier exemple sera tiré du site alligator.io, qui traite de développement web. Nous allons reproduire le menu “mosaïque” situé en bas de la page.

Squelette de la page

La première étape sera de déclarer dans notre feuille de style style.css les couleurs utilisées. On en profitera pour fixer la couleur de fond et du texte du document, en ciblant l’élément html.

:root
{
  --couleur-fond: #222831;
}

html
{
  box-sizing: border-box;

  background-color: var(--couleur-fond);  
}

Créons maintenant le squelette du fichier index.html correspondant.

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Visualisée dans le navigateur, cette page affichera un fond bleu métallisé du plus bel effet. C’est un bon début !

Ajout du menu

Insérons alors dans le corps du document (body) le menu contenant quatre éléments.

<nav>
  <a href="/a-propos/">À propos</a>
  <a href="/remerciements/">Remerciements</a>
  <a href="/contact/">Contact</a>
  <a href="/politique-confidentialite/">Politique de confidentialité</a>
</nav>

Ajoutons aussi le style correspondant pour les liens : on leur affecte la couleur de fond, et on supprime le soulignement. Pour cela, on va déclarer deux nouvelles variables dans la pseudo-classe :root.

:root
{
  --couleur-fond: #222831;
  --couleur-principale: #dfa612;
  --couleur-secondaire: #373831;
}

a
{
  background-color: var(--couleur-secondaire);
  color: var(--couleur-principale);

  text-decoration: none;
}

Voilà à quoi ressemble notre menu pour l’instant :

Centrage du menu

On va donner au menu une largeur de 800 pixels, une hauteur de 150 pixels et le centrer horizontalement. Dans ce but, on assigne la classe menu à l’élément de navigation nav.

<nav class="menu">
  <a href="/a-propos/">À propos</a>
  <a href="/remerciements/">Remerciements</a>
  <a href="/contact/">Contact</a>
  <a href="/politique-confidentialite/">Politique de confidentialité</a>
</nav>

On fixe ses marges droites et gauches à auto afin de le centrer horizontalement.

.menu
{
  width: 800px;
  height: 150px;

  margin-left: auto;
  margin-right: auto;
}

Mise en forme du menu

Pour pouvoir personnaliser le menu plus facilement, on va enrichir le HTML précédent en ajoutant des classes aux différents éléments (la grille et les liens). Remplaçons donc le code de la grille par celui-ci :

<nav class="menu">
  <a class="a-propos" href="/a-propos/">À propos</a>
  <a class="remerciements" href="/remerciements/">Remerciements</a>
  <a class="contact" href="/contact/">Contact</a>
  <a class="politique-confidentialite"
href="/politique-confidentialite/">Politique de confidentialité</a>
</nav>

Pour afficher le menu sous forme de grille, il suffit d’imaginer que son contenu est placé dans une table de quatre colonnes et deux lignes.

À proposContact
RemerciementsPolitique de confidentialité

Ainsi, en considérant que la numérotation des lignes et colonnes commence à un, le lien “À propos” est situé ligne 1, colonne 1. “Remerciements” est ligne 2, colonne 2. “Contact” est en ligne 1, colonne 3 et finalement “Politique de confidentialité” ligne 2, colonne 4.

La traduction en CSS est assez immédiate. Tout d’abord, on indique que le menu doit être affiché via le module CSS Grid, via l’attribut display: grid.

.menu
{
  display: grid;
}

Ensuite, on affecte aux liens leur position en utilisant l’attribut grid-area. Cette propriété permet de spécifier la position d’un élément; la valeur utilisée est la ligne et la colonne, séparée par un slash (/).

.remerciements
{
  grid-area: 2 / 2;
}

.contact
{
  grid-area: 1 / 3;
}

.politique-confidentialite
{
  grid-area: 2 / 4;
}

Plusieurs remarques quant à ce code :

  • Le premier élément (À propos) sera positionné naturellement dans la cellule en haut à gauche, donc on ne spécifie pas à nouveau ses coordonnées
  • La valeur prend d’abord la ligne et ensuite la colonne, contrairement à la convention habituelle. Cela est parfois source de bugs ! 
  • De même, attention à ne pas oublier le slash pour séparer la ligne et la colonne
  • Enfin, on verra plus tard que la propriété grid-area accepte aussi quatre valeurs, qui permettent de fusionner une cellule sur plusieurs lignes et/ou colonnes

Peaufinage de la largeur du menu et de ses colonnes

On remarque que tous les éléments n’ont pas la même taille. En effet, par défaut, CSS Grid affecte à chaque élément la taille qui leur est nécessaire – et dépend donc de la longueur du texte affiché -.

Pour définir des colonnes de même largeur ainsi que des lignes de même hauteur, il faut ajouter au menu la propriété suivante :

.menu
{
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

Cela indique qu’il faut créer quatre colonnes de taille identique; l’unité fr signifie fraction, et on aura donc quatre colonnes occupant chacune un quart de la largeur. Le même principe est utilisé pour obtenir des lignes de hauteur identique.

Centrage des liens

En CSS, il y a plusieurs façons de centrer un élément à la fois horizontalement et verticalement. La plus simple est paradoxalement d’ajouter un élément : on va en effet ajouter à chaque lien un parent, et utiliser Flex sur ce nouvel élément pour centrer le lien dans les deux directions.

Normalement, Flex est utilisé pour gérer la géométrie de plusieurs éléments en une dimension; c’est le penchant mono-dimensionnel de CSS Grid. Cependant, comme on va le voir, il est aussi très utile quand le conteneur ne possède qu’un élément.

Transformons donc le menu de la façon suivante :

<nav class="menu">
  <div class="element-menu a-propos">
    <a href="/a-propos/">À propos</a>
  </div>
  <div class="element-menu remerciements">
    <a href="/remerciements/">Remerciements</a>
  </div>
  <div class="element-menu contact">
    <a href="/contact/">Contact</a>
  </div>
  <div class="element-menu politique-confidentialite">
    <a href="/politique-confidentialite/">Politique de confidentialité</a>
  </div>
</nav>

Un point important à noter est que la classe qui était précédemment affectée au lien (afin de le placer dans la grille) a été déplacée au niveau du nouveau div.

Affectons à ce nouvel élément les propriétés suivantes :

.element-menu
{
  display: flex;

  justify-content: center;
  align-items: center;

  background-color: var(--couleur-secondaire);    
}

Le texte est maintenant centré, mais il reste aligné à gauche sur “Politique de confidentialité”. Réglons ce problème en ajoutant text-align: center au propriétés de la classe element-menu.

Enfin, pour espacer ces éléments, on leur ajoute une marge externe, via margin: 0.1em. On y est presque !

Utilisation d’une fonte externe

La fonte utilisée pour ce menu sur alligator.io s’appelle Recursive.  Il y a fort à parier que cette fonte assez rare ne se trouvera pas sur votre ordinateur.

Essayons pour voir d’ajouter la règle font-family: Recursive  aux éléments de menu. En rechargeant la page, vous ne devriez voir aucun changement. Et même si la fonte était disponible chez vous (par exemple, si vous avez déjà visité un site qui l’utilise), il y a peu de chances que ce soit aussi le cas chez vos utilisateurs.

Il existe plusieurs façons de mettre une fonte à disposition. Le plus simple est d’utiliser Google Fonts. Cette solution n’est cependant pas la plus efficace en termes de temps de chargement; nous verrons donc des alternatives par la suite.

Pour l’instant, rendons nous sur https://fonts.google.com et cherchons Recursive. Un aperçu de la fonte s’affiche en bas de l’écran; il faut cliquer dessus pour accéder aux détails.

Un rendu de la fonte pour différents styles et tailles apparaît alors. Il faut alors sélectionner la ou les combinaisons qui nous intéressent.

Dans notre page, seule la fonte “normale” (non oblique) est utilisée, avec un poids par défaut (400). Cliquons alors sur “Select this style” dans la ligne “Regular 400”, puis cliquons sur l’onglet “Embed” à droite de l’écran. La ligne de code HTML correspondant est à ajouter dans l’en-tête <head> de notre document HTML.  

Pour la version actuelle de Google Fonts, j’aurai donc l’en-tête suivant :

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Il s’agit simplement d’un lien vers une feuille de style générée par Google, qui indiquera à son tour au navigateur comment obtenir la fonte Recursive.

Pour l’utiliser, rien de plus simple :

.menu
{
  font-family: Recursive, Courier, monospace;
}

On a par précaution ajouté à la fonte Recursive deux autres fontes de la même famille, qui seront utilisées si les fontes sur Google Fonts sont inaccessibles.

Voici le résultat final :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *