Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 46 insertions, 91 deletions

diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html
index 272858a9e8..6a0d5da4ad 100644
--- a/files/fr/learn/css/css_layout/grids/index.html
+++ b/files/fr/learn/css/css_layout/grids/index.html
@@ -22,13 +22,13 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
 
-<p class="summary">« 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.</p>
+<p>« 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.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
-   <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_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>).</td>
   </tr>
   <tr>
    <th scope="row">Objectif :</th>
@@ -43,7 +43,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p>
 
-<p><img alt="Schéma du quadrillage" src="https://mdn.mozillademos.org/files/16104/grille.png" style="display: block; height: 346px; margin: 0px auto; width: 747px;"></p>
+<p><img alt="Schéma du quadrillage" src="grille.png"></p>
 
 <h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2>
 
@@ -70,11 +70,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>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éé.</p>
 
-<div id="Grid_1">
-<div class="hidden">
-<h6 id="Simple_Grid_Example">Simple Grid Example</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -88,7 +84,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   border: 2px solid rgb(79,185,227);
 }          </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;div&gt;Un&lt;/div&gt;
  &lt;div&gt;Deux&lt;/div&gt;
  &lt;div&gt;Trois&lt;/div&gt;
@@ -102,10 +98,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   display: grid;
   grid-template-columns: 200px 200px 200px;
 } </pre>
-</div>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p>
 
 <h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3>
 
@@ -127,11 +121,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> 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.</p>
 
-<div id="Grid_2">
-<div class="hidden">
-<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -151,7 +141,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 }
                 </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;div&gt;Un&lt;/div&gt;
  &lt;div&gt;Deux&lt;/div&gt;
  &lt;div&gt;Trois&lt;/div&gt;
@@ -160,13 +150,11 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Sept&lt;/div&gt;
 &lt;/div&gt;                         </pre>
-</div>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p>
 
 <div class="note">
-<p><strong>Note </strong>: L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p>
+<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p>
 </div>
 
 <h3 id="Espaces_entre_pistes">Espaces entre pistes</h3>
@@ -181,11 +169,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p>
 
-<div id="Grid_3">
-<div class="hidden">
-<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -222,7 +206,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
 
 <div class="note">
-<p><strong>Note </strong>: Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, 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.</p>
+<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, 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.</p>
 </div>
 
 <pre class="brush: css">.container {
@@ -250,11 +234,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>Par défaut, les rangées de la trame implicite sont <code>auto</code> 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é <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p>
 
-<div id="Grid_4">
-<div class="hidden">
-<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -268,7 +248,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   border: 2px solid rgb(79,185,227);
 }                  </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
  &lt;div&gt;Un&lt;/div&gt;
  &lt;div&gt;Deux&lt;/div&gt;
  &lt;div&gt;Trois&lt;/div&gt;
@@ -278,7 +258,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
  &lt;div&gt;Sept&lt;/div&gt;
 &lt;/div&gt;
                         </pre>
-</div>
 
 <pre class="brush: css">.container {
   display: grid;
@@ -286,9 +265,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   grid-auto-rows: 100px;
   grid-gap: 20px;
 }</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p>
 
 <h3 id="La_fonction_minmax">La fonction minmax()</h3>
 
@@ -311,11 +289,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 
 <p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p>
 
-<div id="Grid_5">
-<div class="hidden">
-<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -330,7 +304,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
 }
                 </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
   &lt;div&gt;Un&lt;/div&gt;
   &lt;div&gt;Deux&lt;/div&gt;
   &lt;div&gt;Trois&lt;/div&gt;
@@ -339,7 +313,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   &lt;div&gt;Six&lt;/div&gt;
   &lt;div&gt;Sept&lt;/div&gt;
 &lt;/div&gt;                       </pre>
-</div>
 
 <pre class="brush: css">.container {
   display: grid;
@@ -347,9 +320,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
   grid-auto-rows: minmax(100px, auto);
   grid-gap: 20px;
 }</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p>
 
 <p>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.</p>
 
@@ -399,11 +371,7 @@ footer {
   grid-row: 3;
 }</pre>
 
-<div id="Grid_6">
-<div class="hidden">
-<h6 id="Line-based_placement">Line-based placement</h6>
-
-<pre class="brush: css">                body {
+<pre class="brush: css hidden">                body {
                     width: 90%;
                     max-width: 900px;
                     margin: 2em auto;
@@ -448,8 +416,8 @@ aside {
 }
 </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
+  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;Mon article&lt;/h1&gt;
     &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
@@ -462,13 +430,11 @@ aside {
   &lt;/aside&gt;
   &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
 &lt;/div&gt;               </pre>
-</div>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p>
 
 <div class="note">
-<p><strong>Note </strong>: vous pouvez aussi utiliser la valeur <code>-1</code> 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 <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p>
+<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> 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 <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p>
 </div>
 
 <h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2>
@@ -505,11 +471,8 @@ footer {
 
 <p>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 !</p>
 
-<div id="Grid_7">
-<div class="hidden">
-<h6 id="Line-based_placement_2">Line-based placement</h6>
 
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -555,8 +518,8 @@ footer {
 }
                 </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
+  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;Mon article&lt;/h1&gt;
     &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
@@ -569,10 +532,8 @@ footer {
   &lt;/aside&gt;
   &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
 &lt;/div&gt;               </pre>
-</div>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p>
 
 <p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p>
 
@@ -612,11 +573,7 @@ footer {
   grid-row: 3;
 }</pre>
 
-<div id="Grid_8">
-<div class="hidden">
-<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>
-
-<pre class="brush: css">body {
+<pre class="brush: css hidden">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -662,8 +619,8 @@ aside {
 }
                 </pre>
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+<pre class="brush: html hidden">&lt;div class="container"&gt;
+  &lt;header&gt;Voici mon joli blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;Mon article&lt;/h1&gt;
     &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
@@ -676,14 +633,12 @@ aside {
   &lt;/aside&gt;
   &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
 &lt;/div&gt;               </pre>
-</div>
-</div>
 
-<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p>
 
-<p>Si vous utilisez <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur &gt; Mise en page &gt; Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p>
+<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur &gt; Mise en page &gt; Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p>
 
-<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16109/trames.png" style="height: 677px; width: 1363px;"></p>
+<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p>
 
 <h2 id="Résumé">Résumé</h2>
 
@@ -692,8 +647,8 @@ aside {
 <h2 id="Voir_également">Voir également</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li>
- <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li>
 </ul>
 
 <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
@@ -703,14 +658,14 @@ aside {
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
 </ul>