files/fr/glossary/grid_cell/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

---
title: Cellule de grille
slug: Glossaire/Cellule_de_grille
tags:
  - CSS
  - Glossaire
  - Grilles
translation_of: Glossary/Grid_Cell
---
<p>Dans une <a href="https://developer.mozilla.org/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")}} <span id="result_box" lang="fr"><span>et conceptuellement assimilable à une cellule de tableau.</span></span></p>

<p><img alt="Diagram showing an individual cell on the grid." src="https://mdn.mozillademos.org/files/14767/1_Grid_Cell.png" style="height: 221px; width: 332px;"></p>

<p><span id="result_box" lang="fr"><span>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.</span></span> Les {{glossary("Grid Tracks", "pistes")}}  de <span id="result_box" lang="fr"><span>ligne ou colonne supplémentaire</span></span> seront créées par la création des cellules nécessaires pour contenir tous les éléments.</p>

<p><span id="result_box" lang="fr"><span>Dans l'exemple, nous avons créé une grille de trois colonnes.</span> <span>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.</span></span></p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: 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>

<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
</div>

<h2 id="En_apprendre_plus">En apprendre plus</h2>

<h3 id="Références_de_propriété">Références de propriété</h3>

<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>

<h3 id="En_lire_plus">En lire plus</h3>

<ul>
 <li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/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>