Skip to content

Commit

Permalink
Update and include wording from @DomOBU to fix #16850
Browse files Browse the repository at this point in the history
  • Loading branch information
SphinxKnight committed Oct 25, 2024
1 parent 5e1b3bc commit 32501f5
Showing 1 changed file with 20 additions and 22 deletions.
42 changes: 20 additions & 22 deletions files/fr/glossary/grid_cell/index.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
---
title: Cellule de grille
slug: Glossary/Grid_Cell
l10n:
sourceCommit: 27e8f6c17e93b026d6083ca333ed0d4ff6360d3e
---

{{GlossarySidebar}}

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.
Dans une [grille CSS](/fr/docs/Web/CSS/CSS_grid_layout), une **cellule de grille** est la plus petite unité de la grille. C'est l'espace créé entre 4 intersections de [lignes de grille](/fr/docs/Glossary/Grid_Lines). D'une certaine façon, une cellule de grille est assimilable à une cellule de tableau.

![Diagram showing an individual cell on the grid.](1_grid_cell.png)
![Un diagramme mettant en avant une cellule de grille en bleu turquoise en haut à gauche d'une grille de 3 colonnes par 2 lignes.](1_grid_cell.png)

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.

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.
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 individuellement dans chaque cellule de la grille par l'algorithme de placement automatique. Des [pistes de ligne ou de colonne](/fr/docs/Glossary/Grid_Tracks) supplémentaires seront créées afin d'obtenir suffisamment de cellules pour contenir tous les éléments.

## Exemple

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.

```css hidden
* {
box-sizing: border-box;
Expand Down Expand Up @@ -45,26 +47,22 @@ Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléme

```html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
</div>
```

{{ EmbedLiveSample('Exemple', '300', '280') }}
{{EmbedLiveSample('', '300', '280')}}

## Voir aussi

### Références de propriété

- {{cssxref("grid-template-columns")}}
- {{cssxref("grid-template-rows")}}
- {{cssxref("grid-auto-rows")}}
- {{cssxref("grid-auto-columns")}}

### En lire plus

- 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)
- Les propriétés CSS portant sur les cellules de grille&nbsp;:
- [`grid-template-columns`](/fr/docs/Web/CSS/grid-template-columns)
- [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows)
- [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows)
- [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns)
- [Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
- [Définition des cellules de grille dans la spécification CSS (en anglais)](https://drafts.csswg.org/css-grid/#grid-track-concept)

0 comments on commit 32501f5

Please sign in to comment.