convert content to md

1 files changed, 171 insertions, 148 deletions

diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
index 2b45f2fac6..b340f23c01 100644
--- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md
@@ -9,39 +9,39 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
 original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p>
+Dans [le guide précédent](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid), on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des _zones_ de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !
 
-<h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2>
+## Donner un nom à une zone de grille
 
-<p>On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :</p>
+On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
    grid-area: 1 / 1 / 4 / 2;
 }
-</pre>
+```
 
-<p>Ici, on définit les quatre lignes qui entourent la zone en question :</p>
+Ici, on définit les quatre lignes qui entourent la zone en question :
 
-<p><img alt="The Grid Area defined by lines" src="4_area.png"></p>
+![The Grid Area defined by lines](4_area.png)
 
-<p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p>
+On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :
 
-<ul>
- <li>Un en-tête (<em>header</em>)</li>
- <li>Un pied de page (<em>footer</em>)</li>
- <li>Une barre latérale (<em>sidebar</em>)</li>
- <li>Le contenu principale (<em>content</em>)</li>
-</ul>
+- Un en-tête (_header_)
+- Un pied de page (_footer_)
+- Une barre latérale (_sidebar_)
+- Le contenu principale (_content_)
 
-<p><img alt="An image showing a simple two column layout with header and footer" src="4_layout.png"></p>
+![An image showing a simple two column layout with header and footer](4_layout.png)
 
-<p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p>
+Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -53,11 +53,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<p>Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :</p>
+Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -66,9 +67,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd sd sd main main main main main main"
     "ft ft ft ft   ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -78,31 +80,34 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}</p>
+{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}
 
-<p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.
 
-<h2 id="Laisser_une_cellule_vide">Laisser une cellule vide</h2>
+## Laisser une cellule vide
 
-<p>Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.</p>
+Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -114,9 +119,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -126,16 +132,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -144,26 +151,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "sd sd sd main main main main main main"
       ".  .  .  ft   ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}</p>
+{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}
 
-<p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p>
+Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.
 
-<h2 id="Occuper_plusieurs_cellules">Occuper plusieurs cellules</h2>
+## Occuper plusieurs cellules
 
-<p>Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que <code>hd</code> et <code>ft</code> soient alignés avec <code>main</code>).</p>
+Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que `hd` et `ft` soient alignés avec `main`).
 
-<p>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par <code>sd</code>.</p>
+La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par `sd`.
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -175,9 +185,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -187,16 +198,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -205,28 +217,31 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd sd sd main main main main main main"
     "sd sd sd  ft  ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}</p>
+{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}
 
-<p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p>
+La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
 
-<h2 id="Redéfinir_une_grille_à_avec_des_media_queries">Redéfinir une grille à avec des <em>media queries</em></h2>
+## Redéfinir une grille à avec des _media queries_
 
-<p>Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.</p>
+Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.
 
-<p>Pour ce faire, on définit les noms des zones en dehors de toute <em>media query</em> afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.</p>
+Pour ce faire, on définit les noms des zones en dehors de toute _media query_ afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.
 
-<p>Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :</p>
+Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -236,16 +251,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -268,11 +284,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd"
     "ft";
 }
-</pre>
+```
 
-<p>On peut ensuite redéfinir la disposition à l'intérieur des différentes <em>media queries</em> utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec <code>grid-template-areas</code>.</p>
+On peut ensuite redéfinir la disposition à l'intérieur des différentes _media queries_ utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec `grid-template-areas`.
 
-<pre class="brush: css">@media (min-width: 500px) {
+```css
+@media (min-width: 500px) {
   .wrapper {
     grid-template-columns: repeat(9, 1fr);
     grid-template-areas:
@@ -288,32 +305,35 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "sd sd main main main main main ft ft";
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p>
+{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}
 
-<h2 id="Utiliser_grid-template-areas_pour_des_éléments_d'interface_utilisateur">Utiliser <code>grid-template-areas</code> pour des éléments d'interface utilisateur</h2>
+## Utiliser `grid-template-areas` pour des éléments d'interface utilisateur
 
-<p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p>
+La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.
 
-<h3 id="Exemple_d'objet_média">Exemple d'objet média</h3>
+### Exemple d'objet média
 
-<p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p>
+Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.
 
-<p><img alt="Images showing an example media object design" src="4_media_objects.png"></p>
+![Images showing an example media object design](4_media_objects.png)
 
-<p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p>
+Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec `1fr` et celle pour le texte reçoit `3fr`. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser `1fr` pour la zone du texte. Cette colonne de `1fr` aurait alors occupé le reste de l'espace.
 
-<p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p>
+Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` et pour le texte, on crée une seconde zone intitulée `content`. Ensuite, on utilise ces noms pour créer l'organisation via la propriété `grid-template-areas`.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css
+* {box-sizing: border-box;}
 
 .media {
   border: 2px solid #f76707;
@@ -337,24 +357,27 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   grid-area: content;
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="media"&gt;
-  &lt;div class="image"&gt;&lt;/div&gt;
-  &lt;div class="text"&gt;
+```html
+<div class="media">
+  <div class="image"></div>
+  <div class="text">
     Dans cet exemple, on peut utiliser
     grid-template-areas pour échanger les
     places du texte et du media.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}</p>
+{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}
 
-<h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3>
+### Afficher l'image de l'autre côté
 
-<p>Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p>
+Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure `1fr` est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css
+* {box-sizing: border-box;}
 
 .media {
   border: 2px solid #f76707;
@@ -383,44 +406,45 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   grid-area: content;
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="media flipped"&gt;
-  &lt;div class="image"&gt;&lt;/div&gt;
-  &lt;div class="text"&gt;
+```html
+<div class="media flipped">
+  <div class="image"></div>
+  <div class="text">
     Dans cet exemple, on peut utiliser
     grid-template-areas pour échanger les
     places du texte et du media.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}</p>
+{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}
 
-<h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2>
+## Les propriétés raccourcies pour les grilles CSS
 
-<p>Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.</p>
+Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.
 
-<p>Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.</p>
+Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.
 
-<p>Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle <strong>mais aussi</strong> qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.</p>
+Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle **mais aussi** qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.
 
-<p>Les deux propriétés raccourcies pour les grilles sont <code>grid-template</code> et <code>grid</code>.</p>
+Les deux propriétés raccourcies pour les grilles sont `grid-template` et `grid`.
 
-<h3 id="grid-template"><code>grid-template</code></h3>
+### `grid-template`
 
-<p>La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :</p>
+La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :
 
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
-</ul>
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
 
-<p>Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.</p>
+Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.
 
-<p>Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.</p>
+Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
     display: grid;
     grid-template:
       "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
@@ -428,40 +452,39 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
              / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
 }
-</pre>
+```
 
-<p>La première valeur correspond à celle de <code>grid-template-areas</code> mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec <code>minmax(100px, auto)</code>).</p>
+La première valeur correspond à celle de `grid-template-areas` mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec `minmax(100px, auto)`).
 
-<p>Après la valeur de <code>grid-template-areas</code>, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.</p>
+Après la valeur de `grid-template-areas`, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.
 
-<h3 id="grid"><code>grid</code></h3>
+### `grid`
 
-<p>La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :</p>
+La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :
 
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
-</ul>
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-flow")}}
 
-<p>Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p>
+Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur `0` mais, en revanche, elle ne permet pas de définir des espaces.
 
-<p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p>
+On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
     display: grid;
     grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
     "sd sd sd main main main main main main" minmax(100px, auto)
     "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
     / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
 }
-</pre>
+```
 
-<p>Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété <code>grid-auto-flow</code>.</p>
+Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété `grid-auto-flow`.
 
-<p>Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.</p>
+Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}