Fermer

janvier 10, 2020

Grid Lines


À 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…
En savoir plus sur
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 examiné comment créer un conteneur de grille et les diverses propriétés appliqué à l'élément parent qui constitue 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 par rapport à 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 , grille-colonne-fin grille-ligne-début grille-ligne-fin et leurs raccourcis grille-colonne et grid-row .
  2. Comment utiliser grid-area pour placer par numéro de ligne.
  3. Comment placer des éléments selon le nom de ligne.
  4. La ​​différence entre l'implicite et une grille explicite lors du placement des éléments.
  5. Utilisation du mot-clé span avec un peu de bonus sous-grille .
  6. À surveiller lors du mélange des éléments placés et placés automatiquement

Concepts de base du positionnement basé sur une 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.

 .item {
  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épart, m la valeur après est la ligne de fin.

 .item {
  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 le stylo Grid Lines: placement shorthands by Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo Grid Lines: placement shorthands par Rachel Andrew ( @rachelandrew ) sur CodePen . [19659020] 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 align-self et justifient-self sont étirées.

Si vous ne si votre élément s'étend 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 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:

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

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

 .item {
  grille-colonne: 2;
}

La zone de grille Sténographie

Vous pouvez également placer un élément à l'aide de la 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.

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

L'ordre de ces numéros de ligne est début de ligne de grille début de colonne de grille fin de ligne de grille grille -fin de colonne . 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 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 le 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 à travers un

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 les propriétés grille-modèle-colonnes et grille-modèle-lignes . 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

 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 pourriez l'être si vous travaillez en arabe – alors la ligne 1 dans la direction du bloc est toujours en haut, mais la ligne 1 dans la direction en ligne est à droite.

 L'élément est maintenant placé du côté droit de la grille
Le même placement avec la 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 grille entière est maintenant tournée de 90 degrés
Le même placement en mode écriture: vertical-rl

Par conséquent, les lignes de la grille sont liées au mode écriture et 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 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:

 .item {
  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 l'implicite grid, où j'utilise grid-auto-row pour les dimensionner à 5em.

L'élément avec une classe de placé a été placé pour s'étendre de la ligne ligne 1 à la ligne 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.

Voir le stylet Lignes de grille: grille explicite contre grille implicite par Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le Pen Grid Lines: explicit vs. implicit grid by Rachel Andrew ( @rachelandrew ) sur CodePen .

Il n'existe actuellement aucun moyen de cibler la dernière ligne de la grille implicite, sans connaître le nombre de lignes dont vous disposez.

Placer des éléments par rapport aux lignes nommées [19659002] 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 {
  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 remplacer le numéro de ligne par un nom lorsque vous placez vos articles.

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

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

Voir le Pen Grid Lines : dénomination des lignes par Rachel Andrew ( @rachelandrew ) sur CodePen .

Si votre ligne a plusieurs noms, vous pouvez choisir celui que vous souhaitez 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. Consultez mon article « Nommer les choses dans la disposition de 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 en avez plusieurs lignes qui portent le même nom. C'est une situation qui peut se produire si vous nommez des lignes dans la notation repeat () . 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 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. Ainsi, pour placer un élément commençant par 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 qui sera toujours résolu jusqu'à la première ligne avec ce nom.

Voir le stylo Grid Lines: naming lines by Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo Grid Lines: naming lines par Rachel Andrew ( @rachelandrew ) sur CodePen . [19659064] Utilisation de l'intervalle Mot-clé

Il existe des situations dans lesquelles vous savez que vous voulez qu'un élément s'étende sur un certain nombre de pistes, mais vous ne savez pas exactement où il se trouvera sur la grille. Un exemple serait où vous placez des éléments en utilisant le 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 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 mettrait, puis il s'étend sur 3 pistes.

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

Voir le stylo Quadrillage: mot-clé span par Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo Quadrillage : span mot-clé par Rachel Andrew ( @rachelandrew ) sur CodePen .

Cette technique deviendra très utile une fois que nous aurons un large soutien du sous-réseau ] 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 la sous-grille pour leurs lignes (c'est-à-dire qu'elles auront chacune deux lignes). Vous pouvez le voir dans l'exemple ci-dessous si vous utilisez Firefox et lire mon article CSS Grid Level 2: Here Comes Subgrid pour en savoir plus sur la sous-grille.

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

Voir le stylo Grid Lines: span mot-clé 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 à l'aide de l'inspecteur de grille

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

La grille place automatiquement les éléments dans des cellules vides de la grille, elle n'empile 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 le stylo Grid Lines: carte avec des éléments en couches par Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo 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 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 ceux placés. 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 le stylo Grid Lines: auto-placement by Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo 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é grid-auto-flow 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 le stylo Quadrillage: placement automatique et emballage dense par Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo Quadrillage: placement automatique et emballage dense par Rachel Andrew ( @rachelandrew ) sur CodePen

    .

Notez que ce comportement peut causer des problèmes aux 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 ont déjà placé des objets. 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 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.

Voir le stylo Quadrillage: placement automatique mélangé avec des éléments placés par Rachel Andrew ( @rachelandrew ) sur CodePen .

Voir le stylo Grille: 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 des é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.

Récapitulation

tout ce que vous devez savoir sur les lignes de la 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.

 Éditorial Smashing (il)




Source link

janvier 10, 2020