From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/grid-row-end/index.html | 166 +++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/fr/web/css/grid-row-end/index.html (limited to 'files/fr/web/css/grid-row-end') diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html new file mode 100644 index 0000000000..93a883beb2 --- /dev/null +++ b/files/fr/web/css/grid-row-end/index.html @@ -0,0 +1,166 @@ +--- +title: grid-row-end +slug: Web/CSS/grid-row-end +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-row-end +--- +
{{CSSRef}}
+ +

La propriété grid-row-end définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.

+ +
{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-row-end: auto;
+
+/* Valeurs <custom-ident> */
+grid-row-end: somegridarea;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-row-end: 2;
+grid-row-end: somegridarea 4;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-row-end: span 3;
+grid-row-end: span somegridarea;
+grid-row-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-row-end: inherit;
+grid-row-end: initial;
+grid-row-end: unset;
+
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut 1 s'il n'y a pas d'autres contraintes.
+
<custom-ident>
+
S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. +

Note : Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, grid-row-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec foo-end).

+ +

Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <custom-ident> (cf. définition suivante).

+ +

<custom-ident> ne peut pas prendre la valeur span.

+
+
<integer> && <custom-ident>?
+
Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour <custom-ident>, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position. +

Un entier nul ne peut pas être utilisé (la règle est invalide).

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si <integer> est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{EmbedLiveSample('Exemples', '230', '420')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}}{{Spec2("CSS3 Grid")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-row-end")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf