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

La propriété grid-auto-flow permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.

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

Syntaxe

- -
/* Valeurs avec un mot-clé */
-grid-auto-flow: row;
-grid-auto-flow: column;
-grid-auto-flow: dense;
-grid-auto-flow: row dense;
-grid-auto-flow: column dense;
-
-/* Valeurs globales */
-grid-auto-flow: inherit;
-grid-auto-flow: initial;
-grid-auto-flow: unset;
-
- -

Cette propriété peut prendre deux formes :

- - - -

Valeurs

- -
-
row
-
Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre row ou column n'est fournie, row sera la valeur par défaut.
-
column
-
Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.
-
dense
-
L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres. -

Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.

-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#grid {
-  height: 200px;
-  width: 200px;
-  display: grid;
-  grid-gap: 10px;
-  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
-  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
-}
-
-#item1 {
-  background-color: lime;
-  grid-row-start: 3;
-}
-
-#item2 {
-  background-color: yellow;
-}
-
-#item3 {
-  background-color: blue;
-}
-
-#item4 {
-  grid-column-start: 2;
-  background-color: red;
-}
-
-#item5 {
-  background-color: aqua;
-}
- -

HTML

- -
<div id="grid">
-  <div id="item1"></div>
-  <div id="item2"></div>
-  <div id="item3"></div>
-  <div id="item4"></div>
-  <div id="item5"></div>
-</div>
-<select id="direction" onchange="changeGridAutoFlow()">
-  <option value="column">column</option>
-  <option value="row">row</option>
-</select>
-<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
-<label for="dense">dense</label>
-
- -

JavaScript

- -
function changeGridAutoFlow() {
-  var grid = document.getElementById("grid");
-  var direction = document.getElementById("direction");
-  var dense = document.getElementById("dense");
-  var gridAutoFlow = direction.value === "row" ? "row" : "column";
-
-  if (dense.checked) {
-    gridAutoFlow += " dense";
-  }
-
-  grid.style.gridAutoFlow = gridAutoFlow;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "200px", "230px")}}

- -

Spécifications

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

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.grid-auto-flow")}}

- -

Voir aussi

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

La propriété grid-auto-flow permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.

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

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Valeurs globales */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+
+ +

Cette propriété peut prendre deux formes :

+ + + +

Valeurs

+ +
+
row
+
Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre row ou column n'est fournie, row sera la valeur par défaut.
+
column
+
Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.
+
dense
+
L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres. +

Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.

+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+  <div id="item4"></div>
+  <div id="item5"></div>
+</div>
+<select id="direction" onchange="changeGridAutoFlow()">
+  <option value="column">column</option>
+  <option value="row">row</option>
+</select>
+<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
+<label for="dense">dense</label>
+
+ +

JavaScript

+ +
function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "200px", "230px")}}

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.grid-auto-flow")}}

+ +

Voir aussi

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