Récemment, lors des cours de formation préscolaire, mon fils a été chargé de s'occuper d'un ours en peluche pendant une semaine, ce qui a suggéré la nécessité de prendre l'ours dans une aventure et d'ajouter ses souvenirs à ce sujet à l'album. J'ai vraiment aimé faire cet album et m'a encouragé à penser à comment je ferais quelque chose comme ça en utilisant CSS Grid!
Maille composée
Andy Clarke a fait une présentation fantastique "Inspiré par la technologie CSS Grid" lors
de la conférence
State of the Browser , qui a été un véritable aperçu pour les développeurs ayant des racines de conception comme moi. Dans son discours, il a parlé de la façon dont les idées de conception imprimée peuvent être utilisées sur le Web pour créer des mises en page étonnantes, et comment CSS Grid rend cela non seulement possible, mais aussi beaucoup plus simple que jamais. L'un de ces principes était l'utilisation de mailles composites.
La plupart d'entre nous connaissent probablement l'utilisation des grilles pour la conception et le développement Web. Presque toutes les dispositions du site que j'ai été chargé de développer ont été divisées en une grille standard à 12 colonnes (ou parfois à 24 colonnes) avec des colonnes de largeur égale. Jusqu'à présent, tout est assez prévisible.
Les maillages composés, en revanche, sont créés en se superposant deux ou plusieurs maillages. Les comparaisons, par exemple, d'une grille à 5 colonnes superposées à une grille à 4 colonnes créent un motif rythmique et ouvrent des possibilités pour construire une disposition plus dynamique qu'une grille régulière.
Figure 2 - Nous commençons avec une grille à 4 et 5 colonnes
Figure 3 - Les grilles se chevauchent. En conséquence, nous obtenons une grille compositeCeci est applicable à la fois d'un point de vue psychologique et technique - nous pouvons créer la disposition la plus courante, malgré l'utilisation d'une grille composite. Andy a écrit un article détaillé, «
Inspired Design Decisions: Pressing Matters », qui parle davantage des grilles composites.
Sa présentation de la conférence State of the Browser est également disponible.
Générateur de maillage composé
Les unités fr facilitent l'implémentation de maillages composites dans CSS Grid. J'aime l'idée d'utiliser des grilles composées dans la conception Web, mais je pensais que le processus de calcul de celles-ci (en particulier la grille plus complexe) peut prendre beaucoup de temps. Je voulais pouvoir créer rapidement et facilement des maillages composites, alors, inspiré par le rapport d'Andy, j'ai retroussé mes manches et créé un petit outil pour les créer et les visualiser. Entrez le nombre de colonnes pour deux grilles (avec un maximum de 10 colonnes pour chacune) et le générateur les combinera, donnant la valeur finale qui peut être définie pour la propriété
grid-template-columns . Par exemple, une grille à quatre colonnes plus une grille à cinq colonnes affiche
4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr .
Cet outil est présenté sur
Codepen , alors n'hésitez pas à l'utiliser ou à l'adapter à vos besoins.
Créer une grille pour une mise en page d'album
La grille composite est idéale pour une mise en page d'album que je voudrais rendre un peu imprévisible, mais en conservant un sens du rythme et de l'équilibre. Après quelques expériences avec le générateur, je me suis installé sur une grille composite 6/5, qui, il me semblait, donnait le bon nombre de colonnes pour de nouvelles manipulations. Cela me donne la grille d'origine avec laquelle travailler:
.grid { display: grid; grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr; gap: 1rem; }
Définition de lignes de grille
La définition des lignes de grille était plus difficile et nécessitait un peu plus d'essais et d'erreurs. Chaque photo de la grille doit se chevaucher. Il s'est avéré utile de dessiner une grille approximativement sur papier pour comprendre combien de lignes seraient nécessaires.
Pour maintenir un sens du rythme vertical, j'ai décidé que les photographies devraient se chevaucher d'une certaine manière. J'ai attribué cette taille de superposition à une variable afin qu'elle puisse être utilisée dans toute la page et mise à jour si nécessaire (Fig. 4).
Figure 4 - Superposition d'image verticale .grid { --verticalPadding: 2rem; --overlap: 6rem; }
Chaque image est également accompagnée d'un texte. Pour cela, il doit y avoir suffisamment d'espace au-dessus et en dessous pour qu'il ne chevauche pas la photo précédente. Cela implique l'ajout de lignes de grille au-dessus et au-dessous de la légende, qui agira comme «remplissage». Maintenant, chaque image doit couvrir au moins quatre lignes de la grille - et l'image, qui se chevauche en haut et en bas, doit occuper cinq lignes.
Figure 5 - les lignes qui jouent le rôle de "remplissage" vous permettent de maintenir un intervalle minimum entre la fin du bloc de texte et le début de l'image suivante.Mais nous n'avons pas encore fini de concevoir la grille: j'ai décidé de définir un rapport hauteur / largeur fixe pour les images. Certaines photos seront portrait, tandis que d'autres seront paysage. J'aimerais que la disposition de la grille fonctionne quel que soit le rapport d'aspect des photos ou la longueur du texte, il était donc nécessaire que les lignes de la grille puissent s'adapter.
Au lieu d'utiliser des valeurs fixes pour les chaînes qui agissent comme des superpositions ou du remplissage, nous pouvons rendre ces pistes flexibles en utilisant la fonction minmax (). Cela fournira une situation où les pistes de ligne auront une taille minimale, mais se développeront si nécessaire pour le contenu.
minmax(var(--padding, auto));
Placement des éléments
Maintenant que nous avons le squelette de la grille, il est temps de gérer le placement des éléments. Comprendre et choisir la meilleure façon de les placer dans une grille de n'importe quelle structure peut parfois être difficile. Nous avons un certain nombre d'options différentes: les numéros de ligne, le mot clé span, les lignes ou zones nommées - et certains d'entre eux fonctionnent mieux que d'autres dans certaines situations. Mais il n'y a pas de bonne ou de mauvaise option et il s'agit souvent de trouver la méthode qui vous convient le mieux.
Tant que tout fonctionne comme il se doit, il n'y a pas de mauvaises approches
Placement à l'aide de lignes de grille
Je commence souvent par placer des éléments à l'aide des valeurs de début et de fin - généralement les numéros de la première et de la dernière ligne, mais si je connais le nombre exact de pistes que l'élément doit couvrir, j'utiliserai plutôt le mot clé «span». Parfois, je nomme les lignes de la grille pour ajouter des points de repère importants (par exemple,
wrapper-start et
wrapper-end ), mais je vais rarement jusqu'à nommer les lignes de la grille ou créer des zones de grille directement pour chaque élément de la grille. Une stratégie qui m'aide beaucoup est de spécifier des lignes de grille négatives dans les situations où je veux placer un élément à la fin de la grille. J'ai écrit à ce sujet dans un
article séparé . J'utilise le plus souvent des lignes de grille négatives dans l'axe des colonnes, car dans la plupart des cas (pour les grilles avec lesquelles je travaille), le nombre de colonnes est connu et fixe.
Un élément situé à travers la propriété
grid-column avec une valeur de 1 / -1 couvrira toutes les colonnes de la grille, de la première à la dernière:
.item { grid-column: 1 / -1; }
Je suis plus enclin à nommer des lignes de grille dans des situations où les grilles ont un très grand nombre de pistes. Dans le cas considéré, nous n'avons que 10 pistes de colonne, il me semble donc que le placement des éléments par numéro de ligne semble plus pratique pour une manipulation ultérieure.
En utilisant un mélange de lignes de grille positives / négatives et de valeurs «span», placez simplement les éléments le long de l'axe des colonnes. L'activation de l'inspecteur de grille dans le panneau de développement de Firefox aide beaucoup à cela, car elle nous permet de voir les numéros de ligne.
Placement à l'aide de zones de grille
Si nous regardons la grille. nous pouvons voir que nous avons un assez grand nombre de lignes.
Figure 7 - Une capture d'écran de l'inspecteur de grille Firefox dans le panneau du développeur montrant les colonnes et les lignes de la grilleBien que j'ai commencé à placer des éléments par numéro de ligne sur l'axe des lignes, cela devient rapidement difficile à contrôler. Les éléments doivent se chevaucher et il me semble difficile de suivre la piste sur laquelle un élément doit se terminer et l'autre commencer. De plus, je ne veux pas utiliser de lignes de grille négatives, car il est possible que je veuille compléter ma mise en page à l'avenir. Si j'ajoute finalement des lignes plus explicites à la grille, les numéros de ligne négatifs ne seront plus valides, entraînant potentiellement de nombreuses erreurs de mise en page.
C'est à ce moment que j'ai décidé de créer des régions de grille nommées sur l'axe des lignes. Les zones de grille sont créées de deux manières:
- Utilisation de la propriété
grid-template-areas , qui vous permet de «dessiner» efficacement une disposition de grille en tant que dessin ascii - Utilisation de lignes de grille nommées, utilisation de
-end et -end comme suffixes pour les noms de ligne
La propriété
grid-template-areas ne nous permet pas de définir des zones pour les éléments qui se chevauchent, donc cela ne nous aide pas vraiment avec cette disposition particulière. Cependant, l'utilisation de régions de grille nommées facilite certainement la tâche.
Si nous nommons les lignes à la fois pour l'axe de ligne et l'axe de colonne, nous obtenons une région de grille (Fig.8)
Figure 8 - suffixes des noms de ligne avec -end et -end créer une région de grilleVous pouvez ensuite vous référer à cette zone lorsque nous plaçons un élément à l'aide de la propriété
grid-area :
.item { grid-area: image; }
Cela rend notre code plus concis et lisible que l'utilisation des propriétés grid-column et grid-row et la liste des noms de ligne:
.item { grid-row: image-start / image-end; grid-column: image-start / image-end; }
Mais dans ce cas, nous n'avons besoin que d'une région de grille nommée sur l'axe des lignes. C'est normal, car nous pouvons simplement le référencer en utilisant la propriété grid-row:
.item { grid-row: image; }
Étant donné que nous avons un grand nombre de lignes, il m'a semblé qu'il est beaucoup plus facile d'écrire la propriété
grid-template-rows verticalement afin qu'elle reflète la structure de la page:
grid-template-rows: auto 3rem minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto);
Maintenant, ajouter les noms de ligne au bon endroit devient plus simple, car nous pouvons visualiser la structure de la grille:
grid-template-rows: [header-start] auto [fig1-start] 3rem [header-end] minmax(var(--verticalPadding), auto) [p1-start] minmax(0, auto) [p1-end] minmax(var(--verticalPadding), auto) [fig2-start] var(--overlap) [fig1-end] minmax(var(--verticalPadding), auto) [p2-start] minmax(0, auto) [p2-end] minmax(var(--verticalPadding), auto) [fig3-start] var(--overlap) [fig2-end] minmax(var(--verticalPadding), auto) [p3-start] minmax(0, auto) [p3-end] minmax(var(--verticalPadding), auto) [fig3-end];
Il ne reste plus qu'à se référer aux noms des zones sur l'axe des lignes lorsque nos éléments de grille sont placés:
.fig--1 { grid-column: span 5 / -1; grid-row: fig1; } .fig--2 { grid-column: 1 / span 7; grid-row: fig2; } .fig--3 { grid-column: span 5 / -2; grid-row: fig3; }
Le résultat final (
Fig.10 ) est disponible pour révision sur
Codepen
Fig 10Bien que je n'aie fait aucun effort supplémentaire pour rendre cette mise en page adaptée, elle peut être utilisée sur des écrans encore plus petits que les tablettes. L'adaptation de la disposition des petits écrans ne serait pas très difficile. Personnellement, je choisirais une grille plus simple pour de telles situations, car de nombreuses fonctionnalités visuelles seront toujours perdues. Mais là encore, il n'y a rien de bien ou de mal à cela.