Il n’y a pas si longtemps, nous étions complètement dépendants des pourcentages pour les largeurs et les hauteurs. L’utilisation de pourcentages signifiait que votre mise en page et vos éléments pouvaient prendre une hauteur et une largeur basées sur la fenêtre de visualisation. Mais avec l’évolution des CSS modernes, nous sommes arrivés à un point où il serait même préférable d’éviter d’utiliser les pourcentages.
Découvrez les problèmes courants que vous rencontrerez lors de l’utilisation des pourcentages. Découvrez également les techniques CSS modernes à utiliser à la place des pourcentages. Ces techniques vous donneront le même résultat que les pourcentages sans les inconvénients.
Un exemple de grille très simple
Pour illustrer un problème lié aux unités de pourcentage, considérons cette présentation HTML :
<div class="container my-grid">
<div class="grid-item">
</div>
<div class="grid-item">
</div>
</div>
L’élément extérieur est un div élément conteneur avec deux div enfants. Chaque enfant a un élément de grille classe. Pour transformer le conteneur en une grille à deux colonnes (deux boîtes), nous devons appliquer le code CSS suivant :
body {
background-color: black;
align-items: center;
justify-content: flex-start;
}
.my-grid {
display: grid;
grid-template-columns: 50% 50%;
margin: 3rem;
border: 2px solid gold;
padding: 1rem;
}
.grid-item {
border: 3px solid gold;
padding: 10rem 0;
background: blue;
}
Ainsi, chaque colonne (élément de la grille) a une couleur d’arrière-plan dorée. Dans la classe parentale du conteneur, nous définissons grid-template-column à 50 % pour chaque colonne. Par conséquent, les deux boîtes occupent 50 % de la largeur totale de l’élément conteneur.
Voici le résultat :
Mais cet alignement pose des problèmes. Tout d’abord, si vous décidez d’ajouter un écart au parent de la grille, l’enfant pourrait déborder sur le côté. Par exemple, si vous ajoutez gap : 3px au .my-grid dans le CSS, voici à quoi ressemblerait la mise en page :
Comme vous pouvez le voir dans l’image ci-dessus, la boîte de droite est sortie du conteneur. Parfois, vous ne le remarquerez pas parce que votre espace est suffisamment petit, ce qui entraîne un problème d’alignement étrange. En revanche, si l’écart est plus important, le chevauchement devient tout à fait évident.
Chaque fois que vous utilisez des pourcentages et que vous ajoutez des marges ou des espaces, vous risquez fort de rencontrer ce genre d’erreurs. Mais pourquoi l’erreur se produit-elle ?
C’est parce que chaque colonne représente 50 % de la colonne mère. Dans l’exemple ci-dessus, nous avons 50 % plus 50 % plus cet espace (3px), ce qui fait sortir la boîte du conteneur.
Notez que cette erreur ne se produit pas seulement avec 50-50. Vous pouvez mettre la première colonne à 75%, la seconde à 25% et l’erreur se produira quand même. C’est pourquoi vous devez utiliser la solution suivante plus souvent.
La solution avec des valeurs fractionnaires
La solution consiste à utiliser des valeurs fractionnaires au lieu de pourcentages. Ainsi, au lieu de fixer la première colonne à 75 % et la seconde à 50 %, vous pouvez fixer la première colonne à 3fr et la seconde à 1fr :
grid-template-columns: 3fr 1fr
Cela permet de conserver le même ratio que dans le premier exemple. Mais l’avantage d’utiliser fr L’unité de mesure est qu’elle utilise une fraction de l’espace disponible. Dans ce cas, la première colonne occupera trois parties de l’espace tandis que la deuxième colonne en occupera une, sans compter l’espace vide.
Un autre avantage de l’utilisation de frs par rapport aux pourcentages ou à d’autres unités absolues, comme px ou em, est que vous pouvez les combiner avec des valeurs fixes. Voici un exemple :
grid-template-columns: 1fr 10rem;
Avec le code ci-dessus, vous obtiendrez une valeur fixe qui ne changera jamais, quelle que soit la taille de l’écran. En effet, la colonne de droite restera toujours à 10rem tandis que la colonne de gauche occupera l’espace restant (moins l’espace).
Il est parfois possible d’utiliser des pourcentages. Mais vous devez les utiliser de manière intelligente, en vous adaptant à la situation. Souvent, cela signifie qu’il faut les associer à un fr valeur.
Un exemple plus réaliste
Imaginons que vous ayez une page qui comporte une zone de contenu principal et une zone annexe (pour les articles connexes). La zone de contenu principal occupe trois fractions de l’écran, tandis que l’aparté occupe l’espace restant moins l’espace vide :
.container {
width: 100%;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 1.5rem;
}
.card {
background-color: #5A5A5A;
padding: 10px;
margin-bottom: .5rem;
}
Voici le résultat :
En règle générale, la barre latérale (ou latérale) est déplacée vers le bas (ou le haut) de la page lorsque l’écran devient trop étroit. Cela signifie qu’il faut définir des requêtes de média qui empilent tous les éléments les uns sur les autres lorsque la fenêtre de visualisation atteint un certain point de rupture.
Voici comment vous pouvez tout empiler dans une colonne lorsque la fenêtre de visualisation atteint 55em ou moins :
@media(max-width: 55em) {
.container {
display: flex;
flex-direction: column;
}
}
Le résultat ressemblera à ceci :
Vous ne souhaitez pas que chaque carte couvre la largeur totale de la fenêtre de visualisation. Les cartes doivent plutôt s’afficher côte à côte. La meilleure façon d’y parvenir est d’utiliser les grilles CSS. Mais au lieu de définir des valeurs de largeur fixes (comme 50 %) pour la colonne du modèle de grille, utilisez la propriété repeat() comme suit :
.sidebar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
align-content: start;
gap: 2rem;
}
Ce CSS fixe une taille minimale de 25rem et une taille maximale de 1fr. Cette approche est bien meilleure que la définition de largeurs fixes, car elle repose sur un dimensionnement intrinsèque. En d’autres termes, elle laisse le navigateur se débrouiller en fonction des paramètres disponibles.
Maintenant, lorsque vous réduisez la fenêtre du navigateur à une largeur spécifique, la grille se réajuste automatiquement à deux cases par ligne.
Lorsque l’écran devient plus petit, il n’y a plus qu’une case par ligne. Le navigateur empile donc tous les éléments les uns sur les autres. Tout cela se produit lorsque vous redimensionnez la fenêtre. Vous pouvez utiliser une fonctionnalité du navigateur telle que Chrome DevTools pour comprendre le fonctionnement de ce CSS et la manière dont le redimensionnement des fenêtres modifie la mise en page.
Le plus intéressant, c’est que vous n’avez pas besoin d’une requête de conteneur ou de quoi que ce soit d’autre pour rendre l’élément réactif. Il suffit de définir une grille et d’utiliser min-max() pour définir des valeurs fractionnaires au lieu de tailles fixes.
En savoir plus sur la grille CSS
Si vous voulez être un grand utilisateur de CSS, vous devez avoir une connaissance approfondie des grilles CSS. Les grilles peuvent être très puissantes lorsqu’elles sont bien utilisées. Vous pouvez réaliser presque toutes les mises en page que vous souhaitez à l’aide des grilles. Cela en fait un outil indispensable en CSS.
Une chose à garder à l’esprit lors de l’utilisation des grilles CSS est de se concentrer sur la réactivité. Vous pouvez également utiliser l’approche fractionnée pour éviter les collisions entre les éléments. N’oubliez pas de maîtriser les grilles CSS, car ce style de mise en page vous sera d’une aide précieuse lors de la création de sites web.