Share
Il est tout à fait possible d'utiliser le positionnement CSS sur les éléments de la grille, comme vous le feriez avec la plupart des autres éléments. Cependant, il y a une ou deux bizarreries, alors jetons un coup d'œil rapide pour nous assurer d'éviter les pièges.
Commençons par une simple grille comportant neuf éléments répartis en trois colonnes. Chaque colonne a une largeur de 1fr, sauf la troisième qui (grâce à min max()) ne rétrécira pas plus petit que 160px:
Grille-modèle-colonnes: 1fr 1fr minmax (160px, 1fr);
En ajoutant quelques règles à l'un des éléments, nous pouvons le positionner relativement:
.item-2 position: relative; à droite: 100px; en haut: 30px;
Donc, comme on pouvait s'y attendre, nous déclarons que élément 2 doit être positionné relativement, puis définissez des propriétés de décalage (bien que n'essayez pas d'utiliser l'unité fr sur celles-ci, cela ne fonctionnera pas).
Vous remarquerez, si vous redimensionnez la fenêtre, que l'élément de la grille continue à se comporter exactement comme avant de le repositionner et qu'il conserve, égoïstement, sa place dans la grille au cas où vous voudriez revenir..
Alors qu'est-ce qui se passe quand nous absolument positionner cet article? Premièrement, il se positionnera contre son ancêtre le plus proche, qui a une valeur de position déclarée. Si vous ne définissez pas position: relative; (par exemple) sur le conteneur de grille, l'élément de grille volera hors des limites de la grille à la recherche de quelque chose d'autre à conserver, tel que l'élément html.
Vous verrez dans la démo ci-dessus que l'élément est maintenant positionné à 100 pixels de la gauche et 30 pixels du haut du conteneur de grille. Il a effectivement été supprimé du flux de documents, comme cela est normal avec des éléments en position absolue. Son emplacement dans la grille a été rempli par point 3 et les autres articles se sont placés pour combler les lacunes restantes.
Remarque: si notre conteneur de grille devait avoir un rembourrage, le positionnement serait par rapport à ses limites extérieures.
Vous verrez également qu'il n'a plus les dimensions qu'il utilisait lorsqu'il faisait partie de la grille. Il a été réduit à la taille de son contenu. La grille n'influence pas le dimensionnement de l'élément, et l'élément n'a aucune influence sur le dimensionnement de la grille.
Il faut peut-être un certain temps pour s'y habituer, mais en plus des décalages normaux, vous pouvez également positionner un élément de la grille à l'aide des propriétés d'emplacement de la grille. Par exemple, plaçons notre élément 2 absolument sur surface de la grille: 3/2; (en d'autres termes, à partir de la troisième ligne et de la deuxième colonne).
Cela semble étrange, mais vous pouvez voir que l’article, toujours insensible au dimensionnement de la grille et toujours en dehors du flux, s’est positionné brutalement au-dessus de article-9. C'est comme si elle avait sa propre grille, en plus de l'originale.
Remarque: z-index vous permettra de changer l'ordre d'empilement des éléments, si vous le souhaitez.
Passons à autre chose si nous ajoutons un décalage dans le mix (en haut: 50 px; par exemple) notre élément appliquera ce décalage, tout en restant fidèle à son propre placement imaginaire dans la grille:
Dans notre précédent tutoriel, nous avons expliqué comment Grid créera implicite pistes si elles sont nécessaires; pistes au-delà de celles que nous définissons explicitement. Nous pouvons positionner des éléments sur ces pistes de grille implicites s’ils existent, mais Grid ne le fera pas. créer ces pistes pour les éléments en dehors du flux.
Dans la démo ci-dessous, nous avons positionné élément 2 sur surface de la grille: 2/4; mais cela n'est possible que parce que article-6, qui est toujours dans le flux, a déjà invité Grid à créer ces pistes supplémentaires pour nous.
Pourquoi auriez-vous besoin d'un positionnement avec Grid? Au début, cela peut sembler excessif. Mais si vous considérez des structures en grille brisées et que vous vous déplacez au-delà des pages Web simples «en travers et en bas» auxquelles nous nous sommes habitués, vous trouverez le positionnement très utile..
Accentsconagua