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/index.html | 74 --------------------------------------- files/fr/glossary/grid/index.md | 74 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 74 deletions(-) delete mode 100644 files/fr/glossary/grid/index.html create mode 100644 files/fr/glossary/grid/index.md (limited to 'files/fr/glossary/grid') diff --git a/files/fr/glossary/grid/index.html b/files/fr/glossary/grid/index.html deleted file mode 100644 index b5e9b22b88..0000000000 --- a/files/fr/glossary/grid/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Grille -slug: Glossary/Grid -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid -original_slug: Glossaire/Grid ---- -

Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}.

- -

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

- -

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (track) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (grid items), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

- -

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

- -

Exemple

- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 100px 100px;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-</div>
-
- -

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

- -

En apprendre plus

- -

Références de la propriété

- - - -

En lire plus

- - diff --git a/files/fr/glossary/grid/index.md b/files/fr/glossary/grid/index.md new file mode 100644 index 0000000000..b5e9b22b88 --- /dev/null +++ b/files/fr/glossary/grid/index.md @@ -0,0 +1,74 @@ +--- +title: Grille +slug: Glossary/Grid +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid +original_slug: Glossaire/Grid +--- +

Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}.

+ +

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

+ +

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (track) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (grid items), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

+ +

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

+ +

Exemple

+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

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

+ +

En apprendre plus

+ +

Références de la propriété

+ + + +

En lire plus

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