A propos de l'auteur

Rachel Andrew est non seulement rédactrice en chef du magazine Smashing, mais également développeur Web, écrivaine et conférencière. Elle est l'auteur de plusieurs livres, dont…
Plus à propos
Rachel
Andrew

Dans une nouvelle série, Rachel Andrew décompose la spécification CSS Grid Layout. Cette fois, nous examinons comment utiliser les lignes de la grille pour placer des éléments.

Dans le premier article de cette série, j'ai regardé comment créer un conteneur de grille et les différentes propriétés appliquées à l'élément parent qui composent votre grille. Une fois que vous avez une grille, vous disposez d'un ensemble de lignes de grille. Dans cet article, vous apprendrez à placer des éléments sur ces lignes en ajoutant des propriétés aux enfants directs du conteneur de grille.

Nous couvrirons:

  1. Les propriétés de placement grille-colonne-début, grille-colonne-fin, grille-début de ligne, grille-fin de ligne et leurs raccourcis grille-colonne et grille-ligne.
  2. Comment utiliser zone de grille à placer par numéro de ligne.
  3. Comment placer des éléments selon le nom de la ligne.
  4. La différence entre la grille implicite et explicite lors du placement d'éléments.
  5. En utilisant le envergure mot-clé, avec un peu de bonus sous-grille.
  6. À quoi faut-il faire attention lors du mélange d'éléments placés automatiquement et placés.

Concepts de base du positionnement par ligne

Pour placer un élément sur la grille, nous définissons la ligne sur laquelle il commence, puis la ligne sur laquelle nous voulons qu'il se termine. Par conséquent, avec une grille à cinq colonnes et à cinq lignes, si je veux que mon élément s'étende sur les pistes de deuxième et troisième colonnes, et les pistes de première, deuxième et troisième lignes, j'utiliserais le CSS suivant. N'oubliez pas que nous ciblons la ligne, pas la piste elle-même.

.article {
  grille-début de colonne: 2;
  grille-colonne-fin: 4;
  grille-début de ligne: 1;
  fin de ligne de grille: 4;
}

Cela pourrait également être spécifié comme un raccourci, la valeur avant la barre oblique est la ligne de début, m la valeur après est la ligne de fin.

.article {
  grille-colonne: 2/4;
  quadrillage: 1/4;
}

Sur CodePen, vous pouvez voir l'exemple et modifier les lignes que l'élément s'étend.

Voir les Pen Grid Lines: raccourcis de placement de Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: raccourcis de placement de Rachel Andrew (@rachelandrew) sur CodePen.

Notez que la raison pour laquelle notre arrière-plan de boîte s'étend sur toute la zone est que les valeurs initiales des propriétés d'alignement s'aligner et se justifier sont extensibles.

Si vous n'avez besoin que de votre élément pour couvrir une piste, vous pouvez omettre la ligne de fin, car le comportement par défaut est que les éléments s'étendent sur une piste. Nous voyons cela lorsque nous plaçons automatiquement des éléments comme dans le dernier article, chaque élément va dans une cellule – couvrant une colonne et une piste à une ligne. Ainsi, pour qu'un élément s'étende de la ligne 2 à la ligne 3, vous pouvez écrire:

.article {
  grille-colonne: 2/3;
}

Il serait également parfaitement correct de manquer la ligne de fond:

.article {
  grille-colonne: 2;
}

le zone de grille Sténographie

Vous pouvez également placer un élément en utilisant zone de grille. Nous retrouverons cette propriété dans un prochain article. Cependant, lorsqu'elle est utilisée avec des numéros de ligne, elle peut être utilisée pour définir les quatre lignes.

.article {
  surface de la grille: 1/2/4/4;
}

L'ordre de ces numéros de ligne est grille-début de ligne, grille-colonne-début, grille-fin de ligne, grille-colonne-fin. Si vous travaillez dans une langue horizontale, écrite de gauche à droite (comme l'anglais), c'est en haut, à gauche, en bas, à droite. Vous avez peut-être réalisé que c'était l'opposé de la façon dont nous spécifions normalement les raccourcis tels que la marge en CSS – ceux-ci vont en haut, à droite, en bas, à gauche.

La raison en est que la grille fonctionne de la même manière, quel que soit le mode d'écriture ou la direction que vous utilisez, et nous couvrirons cela en détail ci-dessous. Par conséquent, définir les deux départs puis les deux extrémités est plus logique que de mapper les valeurs aux dimensions physiques de l'écran. Je n'ai pas tendance à utiliser cette propriété pour un placement en ligne, car je pense que les raccourcis à deux valeurs de grille-colonne et grille-ligne sont plus lisibles lors de la numérisation d'une feuille de style.

Lignes sur la grille explicite

J'ai mentionné la grille explicite contre la grille implicite dans mon dernier article. La grille explicite est la grille que vous créez avec le grille-modèle-colonnes etgrille-modèle-lignes Propriétés. En définissant vos pistes de colonne et de ligne, vous définissez également des lignes entre ces pistes et aux bords de début et de fin de votre grille.

Ces lignes sont numérotées. La numérotation commence à 1 sur le bord de départ dans le sens du bloc et en ligne. Si vous êtes en mode d'écriture horizontale, avec des phrases qui commencent sur la gauche et s'étendent vers la droite, cela signifie que la ligne 1 dans la direction du bloc est en haut de la grille, et la ligne 1 dans la direction en ligne est la gauche ligne.

L'élément est affiché en position avec l'inspecteur de grille Firefox mettant en surbrillance les lignes
L'élément placé sur la grille

Si vous travaillez dans une langue RTL horizontale – comme vous le feriez si vous travailliez en arabe – alors la ligne 1 dans le sens du bloc est toujours en haut, mais la ligne 1 dans le sens en ligne est à droite.

L'élément est maintenant placé du côté droit de la grille
Le même placement avec direction: rtl

Si vous travaillez en mode d'écriture verticale, et dans l'image ci-dessous, j'ai défini mode d'écriture: vertical-rl, alors la ligne 1 sera au début de la direction du bloc dans ce mode d'écriture, dans ce cas à droite. La ligne 1 dans la direction en ligne est en haut.

La grille entière est maintenant tournée de 90 degrés
Le même placement en écriture: vertical-rl

Par conséquent, les lignes de la grille sont liées au mode d'écriture et à la direction du script du document ou du composant.

La ligne de fin de votre grille explicite est le nombre -1 et les lignes comptent à partir de ce point, faisant la ligne -2 le deuxième de la dernière ligne. Cela signifie que si vous souhaitez couvrir un élément sur toutes les pistes de la grille explicite, vous pouvez le faire avec:

.article {
  grille-colonne: 1 / -1;
}

Lignes sur la grille implicite

Si vous avez créé des pistes de grille implicites, elles comptent également à partir de 1. Dans l'exemple ci-dessous, j'ai créé une grille explicite pour les colonnes, cependant, des pistes de ligne ont été créées dans la grille implicite, où j'utilise grille-lignes-automatiques pour les dimensionner à 5em.

L'élément avec une classe de mis a été placé pour s'étendre de la ligne de ligne 1 à la ligne de ligne -1. Si nous travaillions avec une grille explicite pour nos deux lignes, l'élément devrait s'étendre sur deux lignes. Étant donné que les pistes de ligne ont été créées dans la grille implicite, la ligne -1 résolu à la ligne 2 et non à la ligne 3.

Voir les Pen Grid Lines: grille explicite vs implicite par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: grille explicite vs implicite par Rachel Andrew (@rachelandrew) sur CodePen.

Il n'existe actuellement aucun moyen de cibler la dernière ligne de la grille implicite, sans savoir combien de lignes vous avez.

Placer des éléments contre des lignes nommées

Dans le dernier article, j'ai expliqué qu'en plus des numéros de ligne, vous pouvez éventuellement nommer des lignes sur votre grille. Vous nommez les lignes en ajoutant un nom ou des noms entre crochets entre les tailles de vos pistes.

.la grille {
  affichage: grille;
  grille-modèle-colonnes: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end];
}

Une fois que vous avez des lignes nommées, vous pouvez échanger le numéro de ligne pour un nom lorsque vous placez vos articles.

.article {
  grille-colonne: début-principal / fin-principale;
}

Voir les Pen Grid Lines: naming lines par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: naming lines par Rachel Andrew (@rachelandrew) sur CodePen.

Si votre ligne a plusieurs noms, vous pouvez choisir celui que vous aimez lorsque vous placez votre article, tous les noms seront résolus sur cette même ligne.

Remarque: Il y a des choses intéressantes qui se produisent lorsque vous nommez des lignes. Jetez un œil à mon article «Nommer les choses dans la disposition de la grille CSS» pour en savoir plus.

Que se passe-t-il si plusieurs lignes portent le même nom?

Vous obtenez un comportement intéressant si vous avez plusieurs lignes portant le même nom. C'est une situation qui peut se produire si vous nommez des lignes dans répéter() notation. Dans l'exemple ci-dessous, j'ai une grille à 8 colonnes, créée en répétant 4 fois un motif de 1fr 2fr. J'ai nommé la ligne avant la petite piste sm et la plus grande piste lg. Cela signifie que j'ai 4 lignes avec chaque nom.

Dans cette situation, nous pouvons ensuite utiliser le nom comme index. Donc, pour placer un élément à partir de la deuxième ligne nommée sm et s'étendant jusqu'à la troisième ligne nommée lg j'utilise grille-colonne: sm 2 / lg 3. Si vous utilisez le nom sans numéro, il sera toujours résolu sur la première ligne avec ce nom.

Voir les Pen Grid Lines: naming lines par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: naming lines par Rachel Andrew (@rachelandrew) sur CodePen.

En utilisant le envergure Mot-clé

Il y a des situations où vous savez que vous voulez qu'un élément couvre un certain nombre de pistes, mais vous ne savez pas exactement où il se trouvera sur la grille. Un exemple serait l'endroit où vous placez des éléments à l'aide du placement automatique, mais souhaitez qu'ils s'étendent sur plusieurs pistes plutôt que sur la valeur par défaut 1. Dans ce cas, vous pouvez utiliser le envergure mot-clé. Dans l'exemple ci-dessous, mon article commence en ligne auto, c'est la ligne où le placement automatique le mettrait, puis il s'étend sur 3 pistes.

.article {
  grille-colonne: auto / span 3;
}

Voir le mot-clé Pen Grid Lines: span de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le mot-clé Pen Grid Lines: span de Rachel Andrew (@rachelandrew) sur CodePen.

Cette technique deviendra très utile une fois que nous aurons un large soutien du sous-grille la valeur pour grille-modèle-colonnes et grille-modèle-lignes. Par exemple, dans une disposition de carte où les cartes ont un en-tête et une zone de contenu principale dans laquelle vous souhaitez vous aligner, vous pouvez faire en sorte que chaque carte s'étende sur 2 lignes, tout en permettant le comportement de placement automatique habituel. Les cartes individuelles utiliseront sous-grille pour leurs lignes (c'est-à-dire obtenir deux lignes chacune). Vous pouvez le voir dans l'exemple ci-dessous si vous utilisez Firefox, et lisez mon article CSS Grid Level 2: Here Comes Subgrid pour en savoir plus sur la sous-grille.

Voir le mot-clé Pen Grid Lines: span et sous-grille par Rachel Andrew (@rachelandrew) sur CodePen.

Voir le mot-clé Pen Grid Lines: span et sous-grille par Rachel Andrew (@rachelandrew) sur CodePen.

/

Une grille de cartes avec l'inspecteur de grille Firefox montrant qu'elles se trouvent chacune sur deux rangées de la grille
L'exemple dans Firefox utilisant l'inspecteur de grille

Superposition d'éléments avec un placement basé sur une ligne

La grille placera automatiquement les éléments dans les cellules vides de la grille, elle n'empilera pas les éléments dans la même cellule. Cependant, en utilisant le placement basé sur une ligne, vous pouvez placer des éléments dans la même cellule de grille. Dans cet exemple suivant, j'ai une image qui s'étend sur des pistes à deux rangées et une légende qui est placée dans la deuxième piste et avec un arrière-plan semi-transparent.

Voir la Pen Grid Lines: carte avec des éléments en couches par Rachel Andrew (@rachelandrew) sur CodePen.

Voir la Pen Grid Lines: carte avec des éléments en couches par Rachel Andrew (@rachelandrew) sur CodePen.

Les éléments s'empilent dans l'ordre dans lequel ils apparaissent dans la source du document. Ainsi, dans l'exemple ci-dessus, la légende vient après l'image et s'affiche donc au-dessus de l'image. Si la légende venait en premier, elle finirait par s'afficher derrière l'image et nous ne serions pas en mesure de la voir. Vous pouvez contrôler cet empilement en utilisant le z-index propriété. S'il était important que la légende soit la première dans la source, vous pouvez utiliser z-index, avec une valeur plus élevée pour la légende que pour l'image. Cela forcerait la légende à s'afficher au-dessus de l'image afin qu'elle puisse être lue.

Mélange basé sur la ligne et placement automatique

Vous devez prendre un peu plus de soin si vous mélangez des articles placés avec des articles placés automatiquement. Lorsque les éléments sont entièrement placés automatiquement dans la grille, ils se placent séquentiellement sur la grille, chacun trouvant le prochain espace vide disponible dans lequel se placer.

Voir les Pen Grid Lines: auto-placement de Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: auto-placement de Rachel Andrew (@rachelandrew) sur CodePen.

Le comportement par défaut est toujours d'avancer et de laisser un espace si un élément ne tient pas sur la grille. Vous pouvez contrôler ce comportement en utilisant la propriété grille-flux automatique avec une valeur de dense. Dans ce cas, s'il existe un élément qui correspond à un espace déjà laissé dans la grille, il sera placé dans l'ordre d'origine afin de combler l'espace. Dans l'exemple ci-dessous utilisant un emballage dense, l'article 3 est maintenant placé avant l'article 2.

Voir les Pen Grid Lines: placement automatique et emballage dense par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: placement automatique et emballage dense par Rachel Andrew (@rachelandrew) sur CodePen.

Notez que ce comportement peut provoquer des problèmes pour les utilisateurs qui parcourent le document car la présentation visuelle ne sera pas synchronisée avec l'ordre source qu'ils suivent.

Le placement automatique fonctionne légèrement différemment si vous avez déjà placé certains éléments. Les éléments placés seront positionnés en premier et le placement automatique recherchera ensuite le premier espace disponible pour commencer à placer les éléments. Si vous avez laissé des espaces en haut de votre mise en page au moyen d'une ligne de grille vide, puis introduisez certains éléments qui sont placés automatiquement, ils se retrouveront dans cette piste.

Pour démontrer dans cet exemple final, j'ai placé avec les propriétés de positionnement basées sur les lignes, les éléments 1 et 2 laissant la première ligne vide. Les éléments ultérieurs ont augmenté pour combler les lacunes.

Voir les Pen Grid Lines: placement automatique mélangé avec des éléments placés par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les Pen Grid Lines: placement automatique mélangé avec des éléments placés par Rachel Andrew (@rachelandrew) sur CodePen.

Ce comportement mérite d'être compris, car il peut signifier que les éléments se retrouvent dans des endroits étranges si vous introduisez de nouveaux éléments dans votre mise en page qui n'ont pas été placés sur la grille.

Emballer

C'est à peu près tout ce que vous devez savoir sur les lignes de grille. N'oubliez pas que vous avez toujours des lignes numérotées, quelle que soit la façon dont vous utilisez la grille, vous pouvez toujours placer un élément d'un numéro de ligne à un autre. Les autres méthodes que nous examinerons dans les prochains articles sont d'autres façons de spécifier votre mise en page, mais elles sont basées sur la grille créée par des lignes numérotées.

Smashing Editorial
(il)