Revise fr Flexbox and Grilles pages (#3436)

* Revise fr Flexbox and Grilles pages

* Minor typofixes and macro removal + EmbedLiveSample fix

Co-authored-by: julieng <julien.gattelier@gmail.com>

2 files changed, 212 insertions, 209 deletions

diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md
index 49b70df024..4548eab0a1 100644
--- a/files/fr/learn/css/css_layout/flexbox/index.md
+++ b/files/fr/learn/css/css_layout/flexbox/index.md
@@ -4,25 +4,25 @@ slug: Learn/CSS/CSS_layout/Flexbox
 translation_of: Learn/CSS/CSS_layout/Flexbox
 original_slug: Apprendre/CSS/CSS_layout/Flexbox
 ---
-{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
 
-Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.
+[Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les fondamentaux du HTML (étudiez
-        <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML"
+        <a href="/fr/Learn/HTML/Introduction_to_HTML"
           >Introduction au HTML</a
         >) et avoir une idée de la manière dont la CSS fonctionne (étudiez
-        <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a
+        <a href="/fr/Learn/CSS/First_steps">Introduction aux CSS</a
         >).
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Apprendre à utiliser le système Flexbox pour créer des mises en page
         web.
@@ -31,29 +31,29 @@ Flexbox est une méthode de mise en page selon un axe principal, permettant de d
   </tbody>
 </table>
 
-## Pourquoi Flexbox ?
+## Pourquoi Flexbox&nbsp;?
 
 Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les [flotteurs (boîtes flottantes)](/fr/docs/Learn/CSS/CSS_layout/Floats) et le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.
 
-Les simples exigences de mise en page suivantes sont difficiles sinon impossibles à réaliser de manière pratique et souple avec ces outils :
+Les simples exigences de mise en page suivantes sont difficiles sinon impossibles à réaliser de manière pratique et souple avec ces outils&nbsp;:
 
-- centrer verticalement un bloc de contenu dans son parent ;
-- faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;
-- faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.
+- Centrer verticalement un bloc de contenu dans son parent&nbsp;;
+- Faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert&nbsp;;
+- Faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.
 
-Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !
+Comme vous le verrez dans les paragraphes suivants, Flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu&nbsp;!
 
 ## Voici un exemple simple
 
-Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt GitHub —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi.
+Dans cet article, nous allons commencer une série d'exercices pour vous faciliter la compréhension du fonctionnement de Flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt GitHub. Chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi.
 
-Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.
+![Une image montrant le point de départ de ce didacticiel sur Flexbox](bih741v.png)
 
-![Échantillon d'utilisation de flexbox](bih741v.png)
+Qu'avons‑nous&nbsp;? Un élément [`<header>`](/fr/docs/Web/HTML/Element/header) avec un en‑tête de haut niveau à l'intérieur, et un élément [`<section>`](/fr/docs/Web/HTML/Element/section) contenant trois éléments [`<article>`](/fr/docs/Web/HTML/Element/article). Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.
 
 ## Détermination des éléments à disposer en boîtes flexibles
 
-Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur `flex` à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :
+Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  [`display`](/fr/docs/Web/CSS/display) du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments [`<article>`](/fr/docs/Web/HTML/Element/article), nous affectons la valeur `flex` à l'élément [`<section>`](/fr/docs/Web/HTML/Element/section) (qui devient un conteneur flex)&nbsp;:
 
 ```css
 section {
@@ -61,32 +61,32 @@ section {
 }
 ```
 
-Voici le résultat :
+Voici le résultat&nbsp;:
 
-![Échantillon d'utilisation de flexbox](flexbox-example2.png)
+![Échantillon d'utilisation de Flexbox](flexbox-example2.png)
 
-Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.
+Cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non&nbsp;? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci.
 
-> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.
+Récapitulons ce qui se passe ici&nbsp;: l'élément auquel nous avons affecté une valeur [`display`](/fr/docs/Web/CSS/display) de `flex` se comporte d'une manière d'un élément de bloc par rapport à sa façon d'interagir avec le reste de la page, tandis que les enfants se disposent comme des éléments flexibles. On en reparlera plus tard. À noter également que vous pouvez définir une valeur `inline-flex` pour [`display`](/fr/docs/Web/CSS/display) si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.
 
 ## Aparté sur le modèle flex
 
-Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :
+Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes&nbsp;:
 
 ![Terminologie pour les boîtes modulables](flex_terms.png)
 
-- L'**axe principal** **(main axis)** est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'**origine principale** **(main start)** et la **fin principale (main end)**.
-- L'**axe croisé** est l'axe perpendiculaire à l'axe principal, c'est-à-dire à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début (**cross start**) et la fin (**cross end**) de l'axe croisé.
-- L'élément parent dont la propriété est `display: flex` ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**).
-- Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (flex items)** (les éléments {{htmlelement("article")}}} dans notre exemple).
+- L'**axe principal (*main axis*)** est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'**origine principale (*main start*)** et la **fin principale (*main end*)**.
+- L'**axe croisé (*cross axis*)** est l'axe perpendiculaire à l'axe principal, c'est-à-dire à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le **début (*cross start*)** et la **fin (*cross end*)** de l'axe croisé.
+- L'élément parent dont la propriété est `display: flex` ([`<section>`](/fr/docs/Web/HTML/Element/section) dans notre exemple) est appelé le **conteneur flex (*flex container*)**.
+- Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (*flex items*)** (les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) dans notre exemple).
 
 Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.
 
-## Colonnes ou lignes ?
+## Colonnes ou lignes&nbsp;?
 
-Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à `row` : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).
+Flexbox dispose de la propriété [`flex-direction`](/fr/docs/Web/CSS/flex-direction) pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés). Cette propriété est égale par défaut à `row`&nbsp;: ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).
 
-Ajoutons la déclaration suivante dans la règle :
+Ajoutez la déclaration suivante dans la règle CSS pour l'élément [`<section>`](/fr/docs/Web/HTML/Element/section)&nbsp;:
 
 ```css
 flex-direction: column;
@@ -94,36 +94,42 @@ flex-direction: column;
 
 Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.
 
-> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi !
+> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi&nbsp;!
 
 ## Enveloppement
 
-Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :
+Problème&nbsp;: quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html) et essayez-le [directement](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple)&nbsp;:
 
 ![Débordement des éléments modulables](flexbox-example3.png)
 
-Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour `section` :
+Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour [`<section>`](/fr/docs/Web/HTML/Element/section)&nbsp;:
 
 ```css
 flex-wrap: wrap;
 ```
 
-Essayons ; la disposition est bien meilleure avec cet ajout :
+Ajoutez aussi la déclaration suivante à votre règle pour [`<article>`](/fr/docs/Web/HTML/Element/article)&nbsp;:
+
+```css
+flex: 200px;
+```
+
+Essayons&nbsp;; la disposition est bien meilleure avec ces ajouts&nbsp;:
 
 ![Conditionnement des éléments modulables](flexbox-example4.png)Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration `flex: 200px` pour les éléments `article` signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.
 
-Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en `row-reverse` — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.
+Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété [`flex-direction`](/fr/docs/Web/CSS/flex-direction) en `row-reverse` — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.
 
-## Forme abrégée « flex-flow »
+## Forme abrégée «&nbsp;flex-flow&nbsp;»
 
-Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer
+Notez maintenant qu'il y a une forme abrégée pour [`flex-direction`](/fr/docs/Web/CSS/flex-direction) et [`flex-wrap`](/fr/docs/Web/CSS/flex-wrap) — [`flex-flow`](/fr/docs/Web/CSS/flex-flow). Ainsi, par exemple, vous pouvez remplacer&nbsp;:
 
 ```css
 flex-direction: row;
 flex-wrap: wrap;
 ```
 
-par
+par&nbsp;:
 
 ```css
 flex-flow: row wrap;
@@ -133,7 +139,7 @@ flex-flow: row wrap;
 
 Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)).
 
-Ajoutez d'abord la règle ci-dessous en fin de la CSS :
+Ajoutez d'abord la règle ci-dessous en fin de la CSS&nbsp;:
 
 ```css
 article {
@@ -141,9 +147,9 @@ article {
 }
 ```
 
-Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, c'est-à-dire que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.
+Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément [`<article>`](/fr/docs/Web/HTML/Element/article) une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, c'est-à-dire que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.
 
-Maintenant ajoutons cette règle en-dessous de la précédente :
+Maintenant ajoutons cette règle en dessous de la précédente&nbsp;:
 
 ```css
 article:nth-of-type(3) {
@@ -151,9 +157,9 @@ article:nth-of-type(3) {
 }
 ```
 
-Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.
+Maintenant, lorsque vous actualisez, vous voyez que le troisième [`<article>`](/fr/docs/Web/HTML/Element/article) occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total (puisque 1&nbsp;+&nbsp;1&nbsp;+&nbsp;2&nbsp;=&nbsp;4). Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.
 
-Vous pouvez également définir une valeur minimale de taille dans la valeur `flex`. Modifiez comme suit vos règles `article` existantes :
+Vous pouvez également définir une valeur minimale de taille dans la valeur `flex`. Modifiez comme suit vos règles `article` existantes&nbsp;:
 
 ```css
 article {
@@ -165,33 +171,31 @@ article:nth-of-type(3) {
 }
 ```
 
-En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : _quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte._
-
-Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.
+En gros, cela dit&nbsp;: «&nbsp;Chaque élément flex reçoit d'abord 200px de l'espace disponible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion&nbsp;». Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.
 
 ![Modulation de la largeur](flexbox-example1.png)
 
-Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.
+Le véritable intérêt de Flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément [`<article>`](/fr/docs/Web/HTML/Element/article), la mise en page continue de fonctionner correctement.
 
-## Flex : forme abrégée vs forme longue
+## flex&nbsp;: forme abrégée vs forme longue
 
-{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :
+[`flex`](/fr/docs/Web/CSS/flex) est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes&nbsp;:
 
-- une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;
-- une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;
-- une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.
+- Une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété [`flex-grow`](/fr/docs/Web/CSS/flex-grow)&nbsp;;
+- Une deuxième valeur de proportion sans unité, [`flex-shrink`](/fr/docs/Web/CSS/flex-shrink), intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de Flexbox — nous n'en parlerons plus dans cet article&nbsp;;
+- Une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété [`flex-basis`](/fr/docs/Web/CSS/flex-basis).
 
-Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.
+Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire et peuvent être quelque peu déroutantes.
 
 ## Alignement horizontal et vertical
 
-Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.
+Vous pouvez également utiliser les fonctionnalités de Flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.
 
-![Alignement](flexbox-example5.png)
+![Cinq boutons alignés horizontalement dans le coin supérieur gauche](flexbox-example5.png)
 
 D'abord, faites une copie locale de cet exemple.
 
-Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :
+Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple&nbsp;:
 
 ```css
 div {
@@ -201,17 +205,17 @@ div {
 }
 ```
 
-![](flexbox_center_space-around.png)
+![Cinq boutons espacés équitablement selon l'axe principal](flexbox_center_space-around.png)
 
 Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.
 
-{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).
+[`align-items`](/fr/docs/Web/CSS/align-items) fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (_cross axis_).
 
 - Par défaut, la valeur est `stretch`, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.
-- Avec la valeur `center`, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.
-- Il y a également des valeurs comme `flex-start` et `flex-end` qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.
+- Avec la valeur `center` utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.
+- Il y a également des valeurs comme `flex-start` et `flex-end` qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez [`align-items`](/fr/docs/Web/CSS/align-items) pour tous les détails.
 
-Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:
+Vous pouvez prendre le pas sur le comportement de [`align-items`](/fr/docs/Web/CSS/align-items) pour un élément flex donné en lui appliquant la propriété [`align-self`](/fr/docs/Web/CSS/align-self). Par exemple, ajoutez ce qui suit aux CSS&nbsp;:
 
 ```css
 button:first-child {
@@ -219,17 +223,17 @@ button:first-child {
 }
 ```
 
-![](flexbox_first-child_flex-end.png)
+![Quatre boutons centrés et un bouton en bas d'une boîte flexible](flexbox_first-child_flex-end.png)
 
 Voyez l'effet obtenu, puis supprimez ensuite la règle.
 
-{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.
+[`justify-content`](/fr/docs/Web/CSS/justify-content) fixe où les éléments flex sont placés sur l'axe principal.
 
-- La valeur par défaut est `flex-start`. Tous les éléments sont disposés vers l'origine de l'axe principal.
-- Vous utiliserez  `flex-end` pour les disposer vers la fin.
+- La valeur par défaut est `flex-start` : tous les éléments sont disposés vers l'origine de l'axe principal.
+- Vous utiliserez `flex-end` pour les disposer vers la fin.
 - `center` est aussi une valeur possible pour `justify-content`. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.
 - La valeur `space-around`, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.
-- Une autre valeur, `space-between`, est semblable à `space-around` mais elle ne laisse pas d'espace aux extrémités.
+- Une autre valeur, `space-between`, est semblable à `space-around`, mais elle ne laisse pas d'espace aux extrémités.
 
 N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.
 
@@ -237,7 +241,7 @@ N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement ava
 
 Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.
 
-Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :
+Le code pour ce faire est simple — ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons&nbsp;:
 
 ```css
 button:first-child {
@@ -245,14 +249,14 @@ button:first-child {
 }
 ```
 
-Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :
+Actualisez, et vous pouvez voir que le bouton «&nbsp;Smile&nbsp;» a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne&nbsp;:
 
-- par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;
-- les éléments flex avec des valeurs `order` plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;
-- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4e, 2e, 3e et premier.
+- Par défaut, tous les éléments flex possèdent une valeur [`order`](/fr/docs/Web/CSS/order) égale à 0&nbsp;;
+- Les éléments flex avec des valeurs `order` plus élevées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles&nbsp;;
+- Les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4e, 2e, 3e et 1er&nbsp;;
 - Le troisième élément suit le deuxième, car il a la même valeur pour `order` et qu'il est placé après dans le code source.
 
-Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :
+Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton «&nbsp;Blush&nbsp;» en tête de l'axe principal avec la règle suivante&nbsp;:
 
 ```css
 button:last-child {
@@ -262,11 +266,11 @@ button:last-child {
 
 ## Boîtes flex imbriquées
 
-Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
+Il est possible de créer des mises en page joliment complexes avec Flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
 
 ![Imbrications avec flexbox](flexbox-example7.png)
 
-Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :
+Le HTML pour cela est vraiment simple. Voici un élément [`<section>`](/fr/docs/Web/HTML/Element/section) contenant trois éléments [`<article>`](/fr/docs/Web/HTML/Element/article). Le troisième élément [`<article>`](/fr/docs/Web/HTML/Element/article) contient trois éléments [`<div>`](/fr/docs/Web/HTML/Element/div), et le premier élément [`<div>`](/fr/docs/Web/HTML/Element/div) contient cinq éléments [`<button>`](/fr/docs/Web/HTML/Element/Button)&nbsp;:
 
     section - article
               article
@@ -278,7 +282,7 @@ Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section
 
 Regardez le code utilisé pour cette disposition.
 
-Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.
+Primo, nous déterminons que les enfants de l'élément [`<section>`](/fr/docs/Web/HTML/Element/section) seront des boîtes flexibles.
 
 ```css
 section {
@@ -286,7 +290,7 @@ section {
 }
 ```
 
-Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.
+Secundo, nous définissons des valeurs flex pour les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément [`<article>`](/fr/docs/Web/HTML/Element/article) pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.
 
 ```css
 article {
@@ -300,11 +304,11 @@ article:nth-of-type(3) {
 }
 ```
 
-Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur `flex:1 100px;` pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.
+Tertio, nous sélectionnons le premier élément [`<div>`](/fr/docs/Web/HTML/Element/div) et lui assignons la valeur `flex: 1 100px;` pour qu'il ait effectivement une hauteur minimale de 100px. Ensuite, nous indiquons que ses enfants (les éléments [`<button>`](/fr/docs/Web/HTML/Element/Button)) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.
 
 ```css
 article:nth-of-type(3) div:first-child {
-  flex:1 100px;
+  flex: 1 100px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
@@ -312,11 +316,11 @@ article:nth-of-type(3) div:first-child {
 }
 ```
 
-Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, ils "descendent" pour créer de nouvelles lignes.
+Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de `1 auto`. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis et sont, si possible, disposés sur la même ligne&nbsp;; sinon ils «&nbsp;descendent&nbsp;» pour créer de nouvelles lignes.
 
 ```css
 button {
-  flex: 1;
+  flex: 1 auto;
   margin: 5px;
   font-size: 18px;
   line-height: 1.5;
@@ -325,29 +329,33 @@ button {
 
 ## Compatibilité des navigateurs
 
-La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).
+La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).
+
+Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser Flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.
+
+Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités Flexbox risque de casser totalement la mise en page et de rendre le site inutilisable.
 
-Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.
+Les stratégies pour contourner les problèmes de compatibilité des navigateurs sont discutées dans le module [Tests croisés sur navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing).
 
-Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.
+## Testez vos compétences&nbsp;!
 
-Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module [Tests croisés sur navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing).
+Nous avons abordé de nombreux points dans cet article, mais pourriez-vous retenir les informations les plus importantes&nbsp;? Vous trouverez des tests supplémentaires pour évaluer vos compétences sur la page [Testez vos compétences&nbsp;: Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox_skills).
 
 ## Résumé
 
-Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.
+Notre visite guidée des bases de Flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.
 
-{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
 
 ## Dans ce module
 
-- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction)
-- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction)
+- [Cours normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)
 - [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats)
-- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning)
-- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
+- [Grilles](/fr/docs/Learn/CSS/CSS_layout/Grids)
+- [Les boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats)
+- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning)
+- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Méthodes de mises en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Compréhension fondamentale de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md
index dc12326fbc..c78ba1e1b7 100644
--- a/files/fr/learn/css/css_layout/grids/index.md
+++ b/files/fr/learn/css/css_layout/grids/index.md
@@ -6,48 +6,52 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
 
-« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.
+«&nbsp;CSS Grid Layout&nbsp;» (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes&nbsp;; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Les fondamentaux du HTML (étudiez
-        <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML"
+        <a href="/fr/Learn/HTML/Introduction_to_HTML"
           >Introduction au HTML</a
         >) et une idée de la manière dont la CSS fonctionne (étudiez
-        <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>
-        et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).
+        <a href="/fr/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>
+        et <a href="/fr/Learn/CSS/Building_blocks">Blocs de base en CSS</a>).
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre les concepts fondamentaux sous-jacents de la disposition en
-        trame et comment la mettre en œuvre en utilisant « CSS Grid ».
+        trame et comment la mettre en œuvre en utilisant «&nbsp;CSS Grid&nbsp;» (Grilles CSS).
       </td>
     </tr>
   </tbody>
 </table>
 
-## Qu'est qu'une disposition en trame ?
+## Qu'est qu'une disposition en trame ?
 
 Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.
 
-La trame est constituée généralement de **rangées** (**colonnes** ou **lignes)**. L'espace entre chaque ligne ou colonne est communément appelé **gouttière**.
+La trame est constituée généralement de **rangées** (**colonnes** ou **lignes**). L'espace entre chaque ligne ou colonne est communément appelé **gouttière**.
 
 ![Schéma du quadrillage](grid.png)
 
 ## Création d'une trame CSS
 
-Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.
+Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser «&nbsp;_CSS Grid Layout_&nbsp;» (modèle de disposition en grille) pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de «&nbsp;_Grid Layout_&nbsp;» (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.
+
+La vidéo suivante fournit une belle explication visuelle de l'utilisation de «&nbsp;_CSS Grid_&nbsp;» (Grilles CSS)&nbsp;:
+
+{{EmbedYouTube("KOvGeFUHAC0")}}
 
 ### Définition d'une trame
 
-Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au-dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.
+Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur (vous pouvez également le [voir en direct ici](https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html)). Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal&nbsp;: les boîtes s'affichent donc accolées les unes au-dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon&nbsp;; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.
 
-Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :
+Pour définir un tramage, on affecte la valeur `grid` à la propriété [`display`](/fr/docs/Web/CSS/display). De la même manière qu'avec Flexbox, nous basculons ainsi en disposition en quadrillage&nbsp;; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier&nbsp;:
 
 ```css
 .container {
@@ -57,16 +61,9 @@ Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxre
 
 Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer `display: grid` fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.
 
-Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.
+Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.
 
-```css
-.container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
-}
-```
-
-Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.
+Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page&nbsp;: nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.
 
 ```css hidden
 body {
@@ -103,11 +100,11 @@ body {
 }
 ```
 
-{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 400) }}
 
-### Trames adaptables avec l'unité fr
+### Trames adaptables avec l'unité **fr**
 
-En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.
+En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité `fr` pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.
 
 En changeant la liste des chaînes par la suivante, on crée trois chaînes de `1fr`.
 
@@ -118,7 +115,7 @@ En changeant la liste des chaînes par la suivante, on crée trois chaînes de `
 }
 ```
 
-Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité `fr` ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :
+Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité `fr` ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi&nbsp;:
 
 ```css
 .container {
@@ -127,7 +124,7 @@ Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué e
 }
 ```
 
-La première chaîne obtient `2fr` de l'espace disponible et les deux autres `1fr` ; la première chaîne sera plus large. Il est possible de mélanger des unités `fr` et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.
+La première chaîne obtient `2fr` de l'espace disponible et les deux autres `1fr`&nbsp;; la première chaîne sera plus large. Il est possible de mélanger des unités `fr` et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.
 
 ```css hidden
 body {
@@ -163,19 +160,19 @@ body {
 </div>
 ```
 
-{{ EmbedLiveSample("", '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 400) }}
 
 > **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.
 
 ### Espaces entre pistes
 
-Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.
+Pour créer des «&nbsp;gouttières&nbsp;» entre chaînes et trames, nous nous servons des propriétés [`column-gap`](/fr/docs/Web/CSS/column-gap) et [`row-gap`](/fr/docs/Web/CSS/row-gap) pour, respectivement, les espacements entre colonnes et entre lignes&nbsp;; la propriété [`gap`](/fr/docs/Web/CSS/gap) définit les deux d'un coup.
 
 ```css
 .container {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
+    gap: 20px;
 }
 ```
 
@@ -189,12 +186,6 @@ body {
   font: .9em/1.2 Arial, Helvetica, sans-serif;
 }
 
-.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-}
-
 .container > div {
   border-radius: 5px;
   padding: 10px;
@@ -204,7 +195,7 @@ body {
 
 ```
 
-```html
+```html hidden
 <div class="container">
  <div>Un</div>
  <div>Deux</div>
@@ -216,38 +207,38 @@ body {
 </div>
 ```
 
-{{ EmbedLiveSample('Espaces_entre_pistes', '100%', 400) }}
-
-> **Note :** Les propriétés _\*gap_ étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.
+{{ EmbedLiveSample('', '100%', 400) }}
 
-```css
-.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-  gap: 20px;
-}
-```
+> **Note :** Les propriétés `-gap` (`column-gap`, `row-gap` et `gap`) étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour «&nbsp;blinder&nbsp;» votre code&nbsp;:
+> 
+> ```css
+> .container {
+>     display: grid;
+>     grid-template-columns: 2fr 1fr 1fr;
+>     grid-gap: 20px;
+>     gap: 20px;
+> }
+> ```
 
 ### Répétition des listes de pistes
 
-Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :
+Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi&nbsp;:
 
 ```css
 .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
+    gap: 20px;
 }
 ```
 
-Nous obtenons 3 chaînes de `1fr` de large, comme précédemment. La première valeur passée à la fonction `repeat` est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.
+Nous obtenons trois chaînes de `1fr` de large, comme précédemment. La première valeur passée à la fonction `repeat()` est le nombre de répétitions de la liste, définie par le paramètre suivant&nbsp;: celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.
 
 ### Trame implicite et explicite
 
-Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.
+Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` ou `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La chaîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.
 
-Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que les rangées créées ont maintenant 100 pixels de haut.
+Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows) et [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns). Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que les rangées créées ont maintenant 100 pixels de haut.
 
 ```css hidden
 body {
@@ -283,24 +274,24 @@ body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
-  grid-gap: 20px;
+  gap: 20px;
 }
 ```
 
-{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 400) }}
 
 ### La fonction minmax()
 
-Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.
+Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut&nbsp;: il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web&nbsp;: vous ne savez jamais vraiment quelle sera la hauteur d'un élément — du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.
 
-La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` :
+La fonction [`minmax()`](/fr/docs/Web/CSS/minmax()) nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 pixels, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax`&nbsp;:
 
 ```css
 .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
+    gap: 20px;
 }
 ```
 
@@ -308,9 +299,9 @@ Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pou
 
 ### Autant de chaînes que possible
 
-Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génération automatique crée autant de chaînes que possible dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.
+Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat()` et [`minmax()`](/fr/docs/Web/CSS/minmax()) pour créer un modèle utile. Parfois, demander à ce que la génération automatique crée autant de chaînes que possible dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à [`repeat()`](/fr/docs/Web/CSS/repeat()) avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et `1fr` pour maximum.
 
-Essayez ceci dans le fichier avec la CSS ci-dessous :
+Essayez ceci dans le fichier avec la CSS ci-dessous&nbsp;:
 
 ```css hidden
 body {
@@ -346,35 +337,35 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-rows: minmax(100px, auto);
-  grid-gap: 20px;
+  gap: 20px;
 }
 ```
 
-{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 400) }}
 
-Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.
+Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de `1fr` répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.
 
 ## Placement sur les lignes
 
-Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.
+Nous passons maintenant de la création du quadrillage à la mise en place des choses dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le [«&nbsp;_writing mode_&nbsp;» (mode d'écriture)](/fr/docs/Web/CSS/CSS_Writing_Modes) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.
 
-Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :
+Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes&nbsp;:
 
-- {{cssxref("grid-column-start")}}
-- {{cssxref("grid-column-end")}}
-- {{cssxref("grid-row-start")}}
-- {{cssxref("grid-row-end")}}
+- [`grid-column-start`](/fr/docs/Web/CSS/grid-column-start)
+- [`grid-column-end`](/fr/docs/Web/CSS/grid-column-end)
+- [`grid-row-start`](/fr/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](/fr/docs/Web/CSS/grid-row-end)
 
-Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :
+Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés&nbsp;:
 
-- {{cssxref("grid-column")}}
-- {{cssxref("grid-row")}}
+- [`grid-column`](/fr/docs/Web/CSS/grid-column)
+- [`grid-row`](/fr/docs/Web/CSS/grid-row)
 
-Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un `/` — une barre inclinée.
+Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec une barre oblique `/`.
 
-[Pour débuter, téléchargez ce fichier](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html). Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.
+[Pour débuter, téléchargez ce fichier](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html) ou [voyez-le en direct ici](https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html). Il comporte déjà une définition de quadrillage et un seul article. Constatez que le _placement automatique_ met les éléments dans chaque cellule du quadrillage créé.
 
-À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :
+À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS&nbsp;:
 
 ```css
 header {
@@ -399,18 +390,18 @@ footer {
 ```
 
 ```css hidden
-                body {
-                    width: 90%;
-                    max-width: 900px;
-                    margin: 2em auto;
-                    font: .9em/1.2 Arial, Helvetica, sans-serif;
-                }
-
-                .container {
-                    display: grid;
-                    grid-template-columns: 1fr 3fr;
-                    grid-gap: 20px;
-                }
+body {
+    width: 90%;
+    max-width: 900px;
+    margin: 2em auto;
+    font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    gap: 20px;
+}
 header {
     grid-column: 1 / 3;
     grid-row: 1;
@@ -461,13 +452,13 @@ aside {
 </div>
 ```
 
-{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 600) }}
 
-> **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite.
+> **Note :** Vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de [trame implicite](/fr/docs/Glossary/Grid).
 
 ## Placer avec grid-template-areas
 
-Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.
+Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas) en donnant un nom au divers éléments du design.
 
 Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.
 
@@ -479,7 +470,7 @@ Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le f
       "sidebar content"
       "footer footer";
   grid-template-columns: 1fr 3fr;
-  grid-gap: 20px;
+  gap: 20px;
 }
 
 header {
@@ -499,7 +490,7 @@ footer {
 }
 ```
 
-Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !
+Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne&nbsp;!
 
 ```css hidden
 body {
@@ -566,21 +557,21 @@ footer {
 </div>
 ```
 
-{{ EmbedLiveSample('', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 600) }}
 
-Les règles pour `grid-template-areas` sont les suivantes :
+Les règles pour `grid-template-areas` sont les suivantes&nbsp;:
 
-- toute cellule du quadrillage doit être remplie.
-- pour couvrir deux cellules, répétez le nom.
-- pour laisser une cellule vide, utilisez un point `.` .
-- les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.
-- les zones ne peuvent pas être répétées dans des emplacements différents.
+- Toute cellule du quadrillage doit être remplie&nbsp;;
+- Pour couvrir deux cellules, répétez le nom&nbsp;;
+- Pour laisser une cellule vide, utilisez un point `.`&nbsp;;
+- Les zones doivent être rectangulaires — par exemple, vous ne pouvez pas avoir une zone en L&nbsp;;
+- Les zones ne peuvent pas être répétées dans des emplacements différents.
 
 Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.
 
-## « CSS Grid » : une structure de quadrillage
+## Grilles CSS&nbsp;: une structure de quadrillage
 
-Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.
+Les «&nbsp;structures&nbsp;» de quadrillage se fondent sur une série de 12 à 16 rangées. Avec les grilles CSS, vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.
 
 [Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.
 
@@ -671,32 +662,36 @@ aside {
 </div>
 ```
 
-{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}
+{{ EmbedLiveSample('', '100%', 600) }}
+
+Si vous utilisez [_Firefox Grid Inspector_ (inspecteur de grilles)](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.
+
+![Les lignes d'un quadrillage à 12 colonnes superposées sur notre design.](learn-grids-inspector.png)
 
-Si vous utilisez [Firefox Grid Inspector](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.
+## Testez vos compétences&nbsp;!
 
-![A 12 column grid overlaid on our design.](learn-grids-inspector.png)
+Vous avez atteint la fin de cet article, mais pourriez-vous retenir les informations les plus importantes&nbsp;? Vous trouverez des tests supplémentaires pour évaluer vos compétences sur la page [Testez vos compétences&nbsp;: Grilles](/fr/docs/Learn/CSS/CSS_layout/Grid_skills).
 
 ## Résumé
 
-Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.
+Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités du modèle de disposition en grille. Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame&nbsp;; leurs intitulés sont rappelés ci-dessous.
 
-## Voir également
+## Voir aussi
 
-- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#guides)
-- [CSS Grid Inspector: Examine grid layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
+- [Grilles CSS (CSS Grid)&nbsp;: Guides](/fr/docs/Web/CSS/CSS_Grid_Layout#guides)
+- [Inspecteur de grille CSS&nbsp;: examiner les grilles](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
 
 {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
 
 ## Dans ce module
 
-- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction)
-- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction)
+- [Cours normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)
 - [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats)
-- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning)
-- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
+- [Grilles](/fr/docs/Learn/CSS/CSS_layout/Grids)
+- [Les boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats)
+- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning)
+- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Méthodes de mises en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Compréhension fondamentale de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)