Le Système de grille simplifie le code nécessaire pour créer des mises en page sur le Web qui étaient auparavant impossibles ou nécessitait beaucoup de code supplémentaire à réaliser.
Veuillez noter que votre navigateur pourrait ne pas encore supporter CSS Grid. Consultez le paragraphe “Navigateurs Compatibles” en bas de la pagepour plus de détails.
Table Des Matières
Simple Responsive Grid Layout
Une approche commune pour créer une mise en page responsive consiste à utiliser des requêtes multimédias (media queries) aux points d’arrêt (breakpoints) appropriés pour modifier la largeur des éléments de la grille (grid items), de sorte que le contenu de chaque élément de la grille s’affiche de manière optimale. Par exemple, si nous voulions 2 colonnes lorsque la taille de l’écran était supérieure à 480px, 3 colonnes lorsque la taille de l’écran était supérieure à 720px et ainsi de suite, nous finirions par écrire plusieurs requêtes multimédias.
Avec Grid, nous pouvons simplement spécifier la largeur minimale de chaque élément de grille, puis laisser le navigateur générer suffisamment de colonnes pour correspondre à la largeur du conteneur. La fonction minmax () nous permet également de spécifier une largeur souple pour la valeur maximale, de sorte que, dans les cas où il y a un espace libre excédentaire dans le conteneur de grille, les éléments de la grille peuvent augmenter l’espace supplémentaire. Cela signifie que les éléments de la grille prendront toujours la largeur du conteneur de la grille.
Le marquage ( markup) requis pour une telle mise en page est assez simple, avec tous les éléments de la grille emballés dans un conteneur de grille unique.
<div class="container">
<div class="grid__item a">A</div>
...
<div class="grid__item m">M</div>
</div>L’utilisation de la valeur de remplissage automatique (auto-fill) dans la notation repeat () indique au navigateur de générer autant de colonnes que nécessaire pour adapter les éléments de grille dans la largeur du conteneur de grille. Dans ce cas, nous avons défini la largeur minimale d’un élément de grille pour 15ch
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
}Vous pouvez voir comment cela fonctionne dans l’exemple en direct ci-dessous. Essayez de redimensionner le navigateur pour voir comment le nombre de colonnes s’ajuste à la taille de la fenêtre modifiable.
[advanced_iframe securitykey=”d14dd178cbc10cf3d7aeca6b652d7a76e8a3e37d” frameborder=”yes” height=”330″ name=”” scrolling=”yes” src=”https://tympanus.net/codrops-playground/huijing/8iQGUFmI/embed/result,html,css/” width=”720″]
Responsive Grid Avec à Éléments De Tailles Différentes
L’algorithme de placement automatique de Grid peut placer des éléments de grille même s’ils ne sont pas de taille uniforme. En outre, nous pouvons spécifier si nous voulons que les éléments de la grille se complètent dans l’ordre ou laissez le navigateur essayer de remplir des espaces vides dans la grille avec des éléments pouvant correspondre. Nous pouvons utiliser la propriété grid-auto-flow pour contrôler quel algorithme doit être utilisé.
Par défaut, grid-auto-flow utilise l’algorithme sparse pour placer des éléments de grille. Cochez la case pour la changer en dense et voir comment les éléments de la grille sont bien emballés.
[advanced_iframe securitykey=”d14dd178cbc10cf3d7aeca6b652d7a76e8a3e37d” frameborder=”yes” height=”580″ name=”” scrolling=”yes” src=”https://tympanus.net/codrops-playground/huijing/LXv6ny8n/embed/result,html,css/” width=”720″]
Mise En Page Multi-Colonnes à Hauteur Égale
La disposition multiple à hauteur égale est parfois appelée la disposition “Saint Graal” car même si elle est un modèle de conception commun, il n’y avait aucun moyen direct de la mettre en œuvre. La recherche d’une implémentation optimale était semblable à la recherche de l’insaisissable Saint Graal. Maintenant que nous avons Grid, il se peut qu’il soit temps de se retirer de ce surnom.
Cette mise en page présente les caractéristiques suivantes
- Un centre fluide avec des barres latérales à largeur fixe.
- La colonne centrale avec le contenu principal apparaît en 1er dans l’ordre source.
- Toute colonne peut être la plus élevée et les autres colonnes correspondent à cette hauteur.
En outre, nous allons rendre cette disposition responsive, en ajustant les positions de chaque section sur la grille lorsque la largeur de la fenêtre devient plus petite.
Avec Grid, le marquage requis devient assez simple et direct:
<div class="container">
<header>...</header>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
<footer>...</footer>
</div>Tout d’abord, nous devons créer la structure de la grille pour loger tout le contenu. Sur la base des diagrammes, nous utiliserons une grille avec 3 colonnes et 5 lignes. La première et la dernière colonne seront fixées au 8ème et les premières et dernières lignes seront réparées au 3ème.
Afin d’atteindre l’exigence d’avoir des colonnes de hauteur égales indépendamment de la quantité de contenu dans chacune d’elles, nous utiliserons les propriétés grid-placement, grid-row et grid-column.
.container {
display: grid;
grid-template-columns: 8em auto 8em;
grid-template-rows: 3em auto auto auto 3em;
}
header {
grid-column: 1 / 4;
}
nav {
grid-row: 2 / 5;
grid-column: 1;
}
aside {
grid-row: 2 / 5;
grid-column: 3;
}
article {
grid-row: 2 / 5;
grid-column: 2;
}
footer {
grid-column: 1 / 4;
grid-row: 5;
}Le reste du code se trouve dans l’exemple en direct ci-dessous. Nous utilisons des requêtes multimédias “media queries” pour réorganiser la mise en page à différentes tailles de la fenêtre.
[advanced_iframe securitykey=”d14dd178cbc10cf3d7aeca6b652d7a76e8a3e37d” frameborder=”yes” height=”600″ name=”” scrolling=”yes” src=”https://tympanus.net/codrops-playground/huijing/pD449OLS/embed/result,html,css/” width=”720″]
Grilles à Éléments non uniformes
Même si le concept d’une grille est ordonnée et uniforme, il existe des astuces que nous pouvons utiliser pour introduire un élément de hasard sur les éléments définis dans une grille. Le principe “The Cicada” a été présenté par Alex Walker dans son article “The Cicada Principle” et Why It Matters to Web Designers en 2011. L’essentiel est que l’utilisation d’un modèle de nombres premiers peut aider à créer l’illusion du hasard.
L’alignement par défaut pour le contenu dans les éléments de la grille se comporte comme s’il était configuré pour être étiré. Cela signifie que le contenu s’étendra pour correspondre aux bords de l’élément de la grille. Nous pouvons également modifier leurs valeurs au début, au centre ou à la fin.
Pour cet exemple, par chaque élément de grille nous avons un certain nombre d’images et un texte correspondant . Nous créerons 4 colonnes de largeur égale, mais la hauteur de la rangée sera déterminée par la hauteur du contenu. Chaque rangée prend alors la hauteur de l’élément de grille la plus haute de cette rangée. Étant donné que chaque élément de grille a un contenu variable, nous pouvons appliquer différentes valeurs d’alignement (align-self) à des éléments de grille «aléatoires» à l’aide du sélecteur nème-enfant (nth-child selector).
[advanced_iframe securitykey=”d14dd178cbc10cf3d7aeca6b652d7a76e8a3e37d” frameborder=”yes” height=”650″ name=”” scrolling=”yes” src=”https://tympanus.net/codrops-playground/huijing/EWadl1kA/embed/result,html,css/” width=”960″]
Les possibilités disponibles avec CSS Grid sont infinies. L’un des exemples les plus intéressants est CSS Mondrian Grid de Jen Simmons. Il existe également d’autres exemples construits à l’aide de CSS Grid sur son site, ce qui peut espérer inspirer votre créativité quand il s’agit de créer vos propres mises en page.
Grid peut necessiter trop de temps pour être appris. Mais croyez moi, une fois que vous le maitriseriez, vos possibilités seront illimitées.
Grid est pris en charge par les versions suivantes:
Remarque
L’implémentation Grid d’origine qui a été introduite dans Internet Explorer 10 a également été incluse dans Internet Explorer 11. Cette implémentation était basée sur une version antérieure de la spécification qui a subi des changements radicaux. Il est possible d’implémenter une mise en page de grille dans IE10 et IE11 en utilisant la syntaxe ancienne, mais il y aura des fonctionnalités qui ne seront pas prises en charge.
