From 7a89da1bf309b748ff4f4be5b16f8d9d148cbe8e Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 15 Nov 2021 21:40:53 +0100 Subject: move *.html to *.md --- files/fr/glossary/grid_lines/index.html | 171 -------------------------------- files/fr/glossary/grid_lines/index.md | 171 ++++++++++++++++++++++++++++++++ 2 files changed, 171 insertions(+), 171 deletions(-) delete mode 100644 files/fr/glossary/grid_lines/index.html create mode 100644 files/fr/glossary/grid_lines/index.md (limited to 'files/fr/glossary/grid_lines') diff --git a/files/fr/glossary/grid_lines/index.html b/files/fr/glossary/grid_lines/index.html deleted file mode 100644 index d76bccfcba..0000000000 --- a/files/fr/glossary/grid_lines/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Ligne de grille (line) -slug: Glossary/Grid_Lines -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Lines -original_slug: Glossaire/Lignes_de_grille_(lines) ---- -

Les lignes de grille sont créées avec la définition  des {{glossary("Grid Tracks", "pistes")}} (tracks) dans la grille explicite pour une grille CSS. Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes (column lines) et 3 lignes de lignes (row lines).

- -

Exemple

- - - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px 100px;
-}
-
- -

{{ EmbedLiveSample('Exemple', '500', '250') }}

- -

Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le mode d'écriture du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.

- -

Diagram showing the grid with lines numbered.

- - -

Les lignes sont également créées dans la grille implicite lorsque des pistes implicites sont créées pour contenir les éléments placés en dehors de la grille explicite, mais ces lignes ne peuvent pas être adressées avec un nombre.

- -

Placement des éléments sur la grille par numéro de ligne

- -

Après avoir créé une grille, vous pouvez placer des éléments sur la grille par numéro de ligne. Dans l'exemple suivant, l'élément est positionné de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne de ligne 1 à la ligne de ligne 3.

- - - -
<div class="wrapper">
-   <div class="item">Item</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px 100px;
-}
-.item {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
- -

{{ EmbedLiveSample('Placement_des_éléments_sur_la_grille_par_numéro_de_ligne', '500', '250') }}

- -

Nommage des lignes

- -

Les lignes créées dans la grille explicite peuvent être nommées, en ajoutant le nom entre crochets avant ou après les informations de dimensionnement de la piste. Lorsque vous placez un objet, vous pouvez utiliser ces noms à la place du numéro de ligne, comme illustré ci-dessous.

- - - -
<div class="wrapper">
-   <div class="item">Item</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
-  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
-}
-.item {
-  grid-column-start: col1-start;
-  grid-column-end: col3-start;
-  grid-row-start: row1-start;
-  grid-row-end: rows-end;
-}
-
- -

{{ EmbedLiveSample('Nommage_des_lignes', '500', '250') }}

- -

En apprendre plus

- -

Références de propriété

- - - -

Further reading

- - diff --git a/files/fr/glossary/grid_lines/index.md b/files/fr/glossary/grid_lines/index.md new file mode 100644 index 0000000000..d76bccfcba --- /dev/null +++ b/files/fr/glossary/grid_lines/index.md @@ -0,0 +1,171 @@ +--- +title: Ligne de grille (line) +slug: Glossary/Grid_Lines +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Lines +original_slug: Glossaire/Lignes_de_grille_(lines) +--- +

Les lignes de grille sont créées avec la définition  des {{glossary("Grid Tracks", "pistes")}} (tracks) dans la grille explicite pour une grille CSS. Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes (column lines) et 3 lignes de lignes (row lines).

+ +

Exemple

+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+
+ +

{{ EmbedLiveSample('Exemple', '500', '250') }}

+ +

Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le mode d'écriture du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.

+ +

Diagram showing the grid with lines numbered.

+ + +

Les lignes sont également créées dans la grille implicite lorsque des pistes implicites sont créées pour contenir les éléments placés en dehors de la grille explicite, mais ces lignes ne peuvent pas être adressées avec un nombre.

+ +

Placement des éléments sur la grille par numéro de ligne

+ +

Après avoir créé une grille, vous pouvez placer des éléments sur la grille par numéro de ligne. Dans l'exemple suivant, l'élément est positionné de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne de ligne 1 à la ligne de ligne 3.

+ + + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+.item {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+ +

{{ EmbedLiveSample('Placement_des_éléments_sur_la_grille_par_numéro_de_ligne', '500', '250') }}

+ +

Nommage des lignes

+ +

Les lignes créées dans la grille explicite peuvent être nommées, en ajoutant le nom entre crochets avant ou après les informations de dimensionnement de la piste. Lorsque vous placez un objet, vous pouvez utiliser ces noms à la place du numéro de ligne, comme illustré ci-dessous.

+ + + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
+  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
+}
+.item {
+  grid-column-start: col1-start;
+  grid-column-end: col3-start;
+  grid-row-start: row1-start;
+  grid-row-end: rows-end;
+}
+
+ +

{{ EmbedLiveSample('Nommage_des_lignes', '500', '250') }}

+ +

En apprendre plus

+ +

Références de propriété

+ + + +

Further reading

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