Comprendre la grille CSS : les lignes de la grille

Dans le premier article de cette série, j'ai vu 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 avez un ensemble de lignes de grille. Dans cet article, vous apprendrez à placer des éléments contre ces lignes en ajoutant des propriétés aux enfants directs du conteneur de grille.

Nous couvrirons :

1. Les propriétés de placement grid-column-start , grid-column-end , grid-row-start , grid-row-end et leurs raccourcis grid-column et grid-row .
2. Comment utiliser grid-area pour placer par numéro de ligne.
3. Comment placer les éléments en fonction du nom de la ligne.
4. La différence entre la grille implicite et explicite lors du placement des éléments.
5. En utilisant le mot-clé span , avec un peu de bonus subgrid .
6. À quoi faire attention lors du mélange d'éléments placés automatiquement et placés.

• Partie 1 : Création d'un conteneur de grille
• Partie 2 : Lignes de quadrillage
• Partie 3 : Zones de modèle de grille

Concepts de base du positionnement basé sur la 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 des deuxième et troisième colonnes, et les pistes des 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.

 .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; }

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

 .item { grid-column: 2 / 4; grid-row: 1 / 4; }

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

Notez que la raison pour laquelle l'arrière-plan de notre boîte s'étend sur toute la zone est que les valeurs initiales des propriétés d'alignement align-self et justify-self sont étirées.

Si vous avez seulement besoin que votre élément s'étende sur 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 le voyons 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 d'une ligne. Donc, pour qu'un élément s'étende de la ligne 2 à la ligne 3, vous pouvez écrire :

 .item { grid-column: 2 / 3; }

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

 .item { grid-column: 2; }

La grid-area

Vous pouvez également placer un élément en utilisant grid-area . 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.

 .item { grid-area: 1 / 2 / 4 / 4; }

L'ordre de ces numéros de ligne est grid-row-start , grid-column-start , grid-row-end , grid-column-end . 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'est le contraire de la façon dont nous spécifions normalement des raccourcis tels que la marge en CSS - ceux-ci s'exécutent 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 ou la direction d'écriture que vous utilisez, et nous aborderons cela en détail ci-dessous. Par conséquent, définir les deux débuts 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 le placement basé sur les lignes, car je pense que les raccourcis à deux valeurs de grid-column et grid-row sont plus lisibles lors de la numérisation d'une feuille de style.

Lignes sur la grille explicite

J'ai mentionné la grille explicite versus la grille implicite dans mon dernier article. La grille explicite est la grille que vous créez avec les propriétés grid-template-columns et grid-template-rows . 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 au bord de départ dans le sens bloc et en ligne. Si vous êtes en mode d'écriture horizontal, avec des phrases qui commencent à gauche et se dirigent vers la droite, cela signifie que la ligne 1 dans le sens du bloc est en haut de la grille et que la ligne 1 dans le sens en ligne est la gauche. ligne.

Si vous travaillez dans un langage RTL horizontal - comme vous pourriez l'être si vous travaillez en arabe - la ligne 1 dans le sens du bloc est toujours en haut, mais la ligne 1 dans le sens en ligne est à droite.

Si vous travaillez en mode d'écriture vertical, et dans l'image ci-dessous, j'ai défini writing-mode: 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 le sens en ligne est en haut.

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 numéro -1 et les lignes comptent à partir de ce point, faisant de la ligne -2 la seconde à partir de la dernière ligne. Cela signifie que si vous souhaitez étendre un élément sur toutes les pistes de la grille explicite, vous pouvez le faire avec :

 .item { grid-column: 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 grid-auto-rows pour les dimensionner à 5em.

L'élément avec une classe placed 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 a été résolue en ligne 2 et non en ligne 3.

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 sur 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.

 .grid { display: grid; grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end]; }

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

 .item { grid-column: main-start / main-end; } 

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

Remarque : Il se passe des choses intéressantes lorsque vous nommez des lignes. Jetez un œil à mon article "Nommer les choses dans la mise en page 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 pourrait se produire si vous nommez des lignes dans la notation repeat() . Dans l'exemple ci-dessous, j'ai une grille de 8 colonnes, créée en répétant 4 fois un motif de 1fr 2fr . J'ai nommé la ligne avant la plus petite piste sm et la plus grande piste lg . Cela signifie que j'ai 4 lignes avec chaque nom.

Dans cette situation, nous pouvons alors utiliser le nom comme index. Donc, pour placer un élément commençant à la deuxième ligne nommée sm et s'étendant jusqu'à la troisième ligne nommée lg , j'utilise grid-column: sm 2 / lg 3 . Si vous utilisez le nom sans numéro, il résoudra toujours la première ligne avec ce nom.

Utilisation du mot-clé span

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

 .item { grid-column: auto / span 3; } 

Cette technique deviendra très utile une fois que nous aurons largement pris en charge la valeur de subgrid -grille pour grid-template-columns et grid-template-rows . Par exemple, dans une disposition de carte où les cartes ont un en-tête et une zone de contenu principale dans lesquelles 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 une sous- subgrid pour leurs rangées (c'est-à-dire qu'elles obtiendront deux rangées 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 le sous-réseau.

/

Superposer des éléments avec un placement basé sur les lignes

La grille placera automatiquement les éléments dans des cellules vides de la grille, elle n'empilera pas les éléments dans la même cellule. Cependant, en utilisant le placement basé sur les lignes, 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 placée dans la deuxième piste et dotée d'un arrière-plan semi-transparent.

Les éléments s'empileront 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 était venue en premier, elle finirait par s'afficher derrière l'image et nous ne pourrions pas la voir. Vous pouvez contrôler cet empilement en utilisant la propriété z-index . 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 faire un peu plus attention si vous mélangez des éléments placés avec des éléments 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 pour s'y placer.

Le comportement par défaut est toujours de progresser vers l'avant 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é grid-auto-flow avec une valeur dense . Dans ce cas, s'il y a un élément qui correspond à un vide déjà laissé dans la grille, il sera placé hors de l'ordre des sources afin de combler le vide. Dans l'exemple ci-dessous utilisant un emballage dense, l'article 3 est maintenant placé avant l'article 2.

Notez que ce comportement peut causer des problèmes aux utilisateurs qui naviguent dans le document car la mise en page 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é un espace blanc en haut de votre mise en page au moyen d'une ligne de grille vide, introduisez des éléments qui sont automatiquement placés, ils se retrouveront dans cette piste.

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

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 la grille. N'oubliez pas que vous avez toujours des lignes numérotées, peu importe comment 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 des moyens alternatifs de spécifier votre mise en page, mais sont basées sur la grille créée par des lignes numérotées.

• Partie 1 : Création d'un conteneur de grille
• Partie 2 : Lignes de quadrillage
• Partie 3 : Zones de modèle de grille