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/index.html | 138 --------------------------------------- files/fr/web/css/grid/index.md | 138 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 138 deletions(-) delete mode 100644 files/fr/web/css/grid/index.html create mode 100644 files/fr/web/css/grid/index.md (limited to 'files/fr/web/css/grid') diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html deleted file mode 100644 index 721ff66aa8..0000000000 --- a/files/fr/web/css/grid/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: grid -slug: Web/CSS/grid -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/grid ---- -
{{CSSRef}}
- -

La propriété grid est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).

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

Note : Une seule déclaration grid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.

-
- -

Syntaxe

- -
/* Valeurs <'grid-template'> */
-grid: none;
-grid: "a" 100px "b" 1fr;
-grid: [linename1] "a" 100px [linename2];
-grid: "a" 200px "b" min-content;
-grid: "a" minmax(100px, max-content) "b" 20%;
-grid: 100px / 200px;
-grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
-
-/* <'grid-template-rows'> /
-   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
-grid: 200px / auto-flow;
-grid: 30% / auto-flow dense;
-grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
-grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
-
-/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
-   <'grid-template-columns'> values */
-grid: auto-flow / 200px;
-grid: auto-flow dense / 30%;
-grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
-grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
-
-/* Valeurs globales */
-grid: inherit;
-grid: initial;
-grid: unset;
- -

Valeurs

- -

Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.

- -
-
<'grid-template'>
-
Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.
-
<'grid-auto-flow'>
-
Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.
-
<'grid-auto-rows'>
-
Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.
-
<'grid-auto-columns'>
-
Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#container {
-  display: grid;
-  grid: repeat(2, 60px) / auto-flow 80px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  width: 50px;
-  height: 50px;
-}
- -

HTML

- -
<div id="container">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", 150)}}

- -

Spécifications

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

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.grid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/grid/index.md b/files/fr/web/css/grid/index.md new file mode 100644 index 0000000000..721ff66aa8 --- /dev/null +++ b/files/fr/web/css/grid/index.md @@ -0,0 +1,138 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid +--- +
{{CSSRef}}
+ +

La propriété grid est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).

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

Note : Une seule déclaration grid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.

+
+ +

Syntaxe

+ +
/* Valeurs <'grid-template'> */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Valeurs globales */
+grid: inherit;
+grid: initial;
+grid: unset;
+ +

Valeurs

+ +

Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.

+ +
+
<'grid-template'>
+
Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.
+
<'grid-auto-flow'>
+
Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.
+
<'grid-auto-rows'>
+
Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.
+
<'grid-auto-columns'>
+
Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 150)}}

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.grid")}}

+ +

Voir aussi

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