Savez-vous que les propriétés CSS des grilles et de l’alignement sont toujours abordées ensemble ? Pourquoi? En raison de la nature de leur existence et du désordre que l’alignement crée sur différents appareils à écran. À quel point la vie des développeurs Web deviendrait facile et pratique si tous les appareils de ce monde existaient avec la même taille d’écran. Ce serait un rêve ! Mais pour revenir à la réalité, nous devons faire face à des centaines d’appareils avec des tailles d’écran différentes, et les problèmes qu’ils créent pour les développeurs avec l’alignement sont un ajout. Les grilles CSS et les sous-grilles CSS ont été introduites pour résoudre le problème d’alignement avec plusieurs éléments existant côte à côte.
Les grilles étaient réactives, et au lieu du « hit and try » des valeurs de pixel et de marge, le réglage display: grid a fonctionné comme un charme. Au fil du temps, témoin des problématiques abordées par les développeurs web, s’ils n’en ont pas, ils en inventent un eux-mêmes. Maintenant, les développeurs ont commencé à créer des conceptions Web complexes avec une grille imbriquée avec d’autres grilles. C’était un arrangement de fortune, et le faire fonctionner était un effort en soi.
Frustré par les plaintes des développeurs Web, CSS a inclus une bibliothèque mise à jour pour les sous-grilles. J’ai créé un article complet sur le sujet ; si vous ne connaissez pas la propriété des grilles CSS, il est fortement recommandé de vous renseigner sur les grilles CSS et les sous-grilles CSS. Cet article est basé sur une situation très importante gérée par le sous-réseau, c’est-à-dire la résolution du problème d’alignement vertical. Mais avant de venir à la solution, je comprends que l’alignement vertical nécessite un peu de détails en soi. Par conséquent, je vais analyser en quoi consiste ce problème pour vous aider à le reconnaître lorsqu’il se produit lors du développement de votre site Web.
Besoin d’alignement vertical
Le problème d’alignement vertical se produit lorsque nous nous débattons avec la réactivité du site Web. Mais saviez-vous qu’il est relativement facile d’ajuster un site Web en fonction de l’écran avec des nombres absolus avec une taille d’écran fixe ? Par exemple, considérons le code ci-dessous :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<fieldset>
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</fieldset>
<fieldset>
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</fieldset>
</body>
</html>Pour organiser le contenu sur la page Web, j’utilise la balise fieldset pour organiser deux boutons pour cette catégorie. Sur un écran de bureau utilisant Firefox, la page Web ressemble à ce qui suit :
Ça a l’air bien, n’est-ce pas ? Mais que se passe-t-il en ce qui concerne la réactivité du site Web ? Verrons-nous alors les mêmes résultats ? Découvrons-le.
Il existe différents outils disponibles sur le marché pour vérifier la réactivité de votre site Web. L’un de ces outils est LT Browser, qui vous permet d’effectuer un débogage de vue mobile en direct de votre site Web simultanément sur mobile et tablette, et vous pouvez voir leur impact sur plus de 50 appareils !
L’exécution du même code sur le navigateur LT nous montrera les résultats suivants sur Google Pixel :
Il s’est écrasé – c’est le problème d’alignement vertical lors de l’exécution d’un test de conception Web. Comme la taille de l’écran a diminué, nous ne pouvons pas aligner correctement les éléments sur la page Web, en particulier au niveau des colonnes. Même si les éléments sont visibles à l’intérieur de l’ensemble de champs et que l’on peut comprendre à quel ensemble de champs ils appartiennent, ils ne sont pas correctement redimensionnés. J’ai utilisé bootstrap dans le code ci-dessus pour obtenir le bouton CSS visible.
D’accord, quelle pourrait être la première étape pour obtenir une réactivité et un alignement vertical correct ? Si vous pensez à div, alors cela ne fonctionnerait probablement pas. UNE div box enveloppera les éléments à l’intérieur dans une boîte, offrant finalement la flexibilité des limites, mais les éléments ne tomberaient pas dans une structure appropriée. Et les grilles CSS ? Peut-être qu’une grille fonctionnerait ! Découvrons-le.
Alignement vertical à l’aide de grilles
Une grille CSS serait le premier choix pour organiser les éléments «de manière réactive», en particulier lors du traitement des éléments à l’intérieur d’un conteneur. Modifions le code ci-dessus avec les mêmes intentions d’envelopper les deux ensembles de champs à l’intérieur de la structure de la grille.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
.grid {
display: grid
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<div class = “grid”>
<fieldset>
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</fieldset>
<fieldset>
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</fieldset>
</div>
</body>
</html>L’exécution du code ci-dessus sur le navigateur LT nous montrera les résultats suivants :
Bien! Nous avons quelques progrès maintenant. La structure de la grille a défini des limites et une flexibilité appropriées pour les éléments. Mais, nous ne sommes toujours pas en mesure d’aligner les éléments verticalement. Remarquez le bouton avec le texte « Anglais » et le bouton juste au-dessus avec le texte « Voyage et aventure ». Les deux boutons de la catégorie Langue se trouvent à l’intérieur des marges d’un seul bouton, « Voyage et aventure ». Par conséquent, nous devons travailler sur notre alignement vertical.
Dans la page Web ci-dessus, il est clair que bien que la structure de la grille soit conservée, les boutons inférieurs doivent s’ajuster en fonction de l’élément parent. Étant donné que l’élément parent fournira une limite de longueur fixe, les éléments inférieurs s’ajusteront automatiquement en fonction du même élément. Cela me rappelle les sous-grilles CSS et leur propriété de dépendre de la grille parente. Cela vaut la peine d’essayer d’incorporer une sous-grille dans notre code et d’observer tous les changements que nous obtenons sur la page Web.
Alignement vertical à l’aide de sous-grilles
Les sous-grilles sont le nouveau membre de la famille CSS à l’intérieur des grilles. Les sous-grilles sont très faciles à coder et effacent complètement le casse-tête de l’utilisation de grilles imbriquées, qui nécessitent des nombres extrêmement soigneusement calculés comme valeurs. Les sous-grilles peuvent être utilisées sur l’un ou l’autre axe (contrairement à flexbox) ou sur les deux axes simultanément. Puisqu’il s’agit ici de l’ajustement des colonnes, nous utiliserons les sous-grilles sur les colonnes.
L’ajustement suivant dans le code (ajout de sous-grilles à chaque ensemble de champs) intégrera les sous-grilles :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
.grid {
display : grid;
}
.subgrid {
display : grid;
grid-template-columns: subgrid;
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<div class = "grid">
<fieldset>
<div class = "subgrid">
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</div>
</fieldset>
<fieldset>
<div class="subgrid">
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</div>
</fieldset>
</body>
</html>Le code ci-dessus affichera les résultats suivants dans le Google Pixel :
Voila ! Nous obtenons une largeur similaire enroulée autour d’un élément de grille en utilisant la propriété subgrid. Vous pouvez appliquer de l’espace et d’autres styles à la page Web pour la rendre plus jolie.
Cela a l’air bien maintenant, et il n’y a aucun problème pour l’utilisateur de bureau puisque les changements ne refléteront pas un écran d’une si grande résolution. Mais il y a un inconvénient à utiliser cette propriété : son acceptation !
Compatibilité du navigateur
L’acceptation par le navigateur des sous-grilles CSS est plutôt faible. Les sous-grilles CSS ne sont pas encore intégrées en tant que propriété standard dans le navigateur au moment de la rédaction de cet article. Bien que Firefox ait déployé la mise à jour avec la sous-grille incluse, cela satisferait environ 4% des personnes.
Après avoir lu cet article, vous devez avoir une idée de la façon dont il devient facile d’aligner les éléments lorsque nous utilisons des sous-grilles avec eux, n’est-ce pas ? Par conséquent, ne les affaiblissez pas par leur acceptation actuelle sur le marché. Ils seront sûrement inscrits dans chaque navigateur avec le temps.
Obtention de l’alignement vertical sur les navigateurs non pris en charge
Comme vous pouvez le voir dans la section précédente, la compatibilité des navigateurs des sous-grilles CSS est terrible, et il vaut mieux être préparé avec une sauvegarde jusqu’à ce que les principaux navigateurs commencent à prendre en charge la propriété. Si nous utilisons des sous-grilles sans aucune sauvegarde, nous obtenons le problème d’alignement suivant :
Pour gérer l’alignement vertical sans sous-grilles CSS, vous pouvez envisager plusieurs stratégies. Le premier itinéraire consiste à démarrer la méthode « hit and try », à effectuer plusieurs tests de site mobile et à obtenir un nombre susceptible d’être utilisé comme pourcentage. Bien que vous puissiez également obtenir de bons résultats sur votre navigateur personnel pour les nombres absolus, les nombres absolus ne doivent jamais être utilisés lorsque nous parlons de servir une si grande variété d’écrans.
Deuxièmement, vous pouvez utiliser les grilles flexbox et CSS pour implémenter l’alignement vertical. Cela prendrait quelques lignes de code supplémentaires, mais les grilles CSS et les flexbox sont de nature réactive, et vous n’avez donc pas à vous soucier de la qualité de leur rendu sur différents appareils.
L’utilisation de l’alignement vertical avec les sous-grilles CSS est la meilleure voie à suivre, mais il semble que nous devrons peut-être attendre un peu pour les implémenter librement sur notre page Web. Jusque-là, ces retournements vous aideront dans le processus, et en fin de compte, c’est ce que l’utilisateur veut : un alignement vertical, peu importe comment nous l’obtenons.
Conclusion
Les développeurs Web ont longtemps eu du mal avec l’alignement et l’organisation des éléments dans la page Web. Un seul élément imbriqué peut prendre une journée entière à s’ajuster en fonction des différentes tailles d’écran à l’aide des requêtes multimédias et d’autres propriétés CSS. L’un des problèmes les plus difficiles parmi eux a toujours été l’alignement vertical des éléments. Étant donné que les éléments évoluent vers le haut et vers le bas sur différents appareils, ils perdent leur position fixe et laissent au hasard un désordre sur la page Web. Les sous-grilles CSS sont le meilleur moyen de résoudre le problème d’alignement vertical car elles dépendent de la grille parente pour leur position.
Par conséquent, chaque fois qu’une grille augmente ou diminue, la sous-grille …