From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/grid-column-end/index.html | 160 ---------------------------- 1 file changed, 160 deletions(-) delete mode 100644 files/fr/web/css/grid-column-end/index.html (limited to 'files/fr/web/css/grid-column-end/index.html') diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html deleted file mode 100644 index d001f397c9..0000000000 --- a/files/fr/web/css/grid-column-end/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: grid-column-end -slug: Web/CSS/grid-column-end -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/grid-column-end ---- -
{{CSSRef}}
- -

La propriété grid-column-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 colonne donné.

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

Syntaxe

- -
/* Valeur avec un mot-clé */
-grid-column-end: auto;
-
-/* Valers <custom-ident> */
-grid-column-end: somegridarea;
-
-/* Valeurs <integer> + <custom-ident> */
-grid-column-end: 2;
-grid-column-end: somegridarea 4;
-
-/* Valeurs span + <integer> + <custom-ident> */
-grid-column-end: span 3;
-grid-column-end: span somegridarea;
-grid-column-end: 5 somegridarea span;
-
-/* Valeurs globales */
-grid-column-end: inherit;
-grid-column-end: initial;
-grid-column-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 colonnes sous cette forme. Ainsi, grid-column-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne 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).

-
-
<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 la fin de la colonne 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.

- -

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

-
-
- -

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-column-end", "grid-column-end")}}{{Spec2("CSS3 Grid")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

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