aboutsummaryrefslogtreecommitdiff
path: root/files/fr/glossary/grid_cell
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-11-15 21:41:03 +0100
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-15 21:55:31 +0100
commitbcf5375310ece1f9a90e99b270cdbae28c4d2831 (patch)
treec9b2792ee2050f4176de7fe5f777b4354b769b04 /files/fr/glossary/grid_cell
parent7a89da1bf309b748ff4f4be5b16f8d9d148cbe8e (diff)
downloadtranslated-content-bcf5375310ece1f9a90e99b270cdbae28c4d2831.tar.gz
translated-content-bcf5375310ece1f9a90e99b270cdbae28c4d2831.tar.bz2
translated-content-bcf5375310ece1f9a90e99b270cdbae28c4d2831.zip
convert content to md
Diffstat (limited to 'files/fr/glossary/grid_cell')
-rw-r--r--files/fr/glossary/grid_cell/index.md64
1 files changed, 31 insertions, 33 deletions
diff --git a/files/fr/glossary/grid_cell/index.md b/files/fr/glossary/grid_cell/index.md
index 2ab01f0baf..5c93356880 100644
--- a/files/fr/glossary/grid_cell/index.md
+++ b/files/fr/glossary/grid_cell/index.md
@@ -8,18 +8,18 @@ tags:
translation_of: Glossary/Grid_Cell
original_slug: Glossaire/Cellule_de_grille
---
-<p>Dans une <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grille CSS</a>, une <strong>cellule de grille</strong> est la plus petite unité de la grille CSS. Elle est un espace entre 4 intersections {{glossary("grid lines","lignes de grille")}} et conceptuellement assimilable à une cellule de tableau.</p>
+Dans une [Grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), une **cellule de grille** est la plus petite unité de la grille CSS. Elle est un espace entre 4 intersections {{glossary("grid lines","lignes de grille")}} et conceptuellement assimilable à une cellule de tableau.
-<p><img alt="Diagram showing an individual cell on the grid." src="1_grid_cell.png"></p>
+![Diagram showing an individual cell on the grid.](1_grid_cell.png)
-<p>Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}}  de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments.</p>
+Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}}  de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments.
-<p>Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres.</p>
+Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres.
+## Exemple
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -27,47 +27,45 @@ original_slug: Glossaire/Cellule_de_grille
background-color: #fff4e6;
}
-.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(3,1fr);
grid-auto-rows: 100px;
}
-</pre>
+```
-<pre class="brush: html">&lt;div class="wrapper"&gt;
- &lt;div&gt;One&lt;/div&gt;
- &lt;div&gt;Two&lt;/div&gt;
- &lt;div&gt;Three&lt;/div&gt;
- &lt;div&gt;Four&lt;/div&gt;
- &lt;div&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+ <div>One</div>
+ <div>Two</div>
+ <div>Three</div>
+ <div>Four</div>
+ <div>Five</div>
+</div>
+```
-<p>{{ EmbedLiveSample('Exemple', '300', '280') }}</p>
+{{ EmbedLiveSample('Exemple', '300', '280') }}
-<h2 id="En_apprendre_plus">En apprendre plus</h2>
+## En apprendre plus
-<h3 id="Références_de_propriété">Références de propriété</h3>
+### Références de propriété
-<ul>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
-</ul>
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-columns")}}
-<h3 id="En_lire_plus">En lire plus</h3>
+### En lire plus
-<ul>
- <li>Guide des grilles CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></em></li>
- <li><a href="https://drafts.csswg.org/css-grid/#grid-track-concept">Définition des cellules de grille dans la spécification CSS</a> (en)</li>
-</ul>
+- Guide des grilles CSS : _[Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)_
+- [Définition des cellules de grille dans la spécification CSS](https://drafts.csswg.org/css-grid/#grid-track-concept) (en)