From bcf5375310ece1f9a90e99b270cdbae28c4d2831 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 15 Nov 2021 21:41:03 +0100 Subject: convert content to md --- files/fr/glossary/grid_areas/index.md | 64 +++++++++++++++++------------------ 1 file changed, 31 insertions(+), 33 deletions(-) (limited to 'files/fr/glossary/grid_areas') diff --git a/files/fr/glossary/grid_areas/index.md b/files/fr/glossary/grid_areas/index.md index e5b98b72f0..ea130ce8ae 100644 --- a/files/fr/glossary/grid_areas/index.md +++ b/files/fr/glossary/grid_areas/index.md @@ -8,17 +8,18 @@ tags: translation_of: Glossary/Grid_Areas original_slug: Glossaire/Zones_de_grille --- -

Une zone de grille est une {{glossary("grid cell","cellule de grille")}}  ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le  placement de la ligne de base ou lors de la définition des zones par l'utilisation de zones de grille nommées.

+Une **zone de grille** est une {{glossary("grid cell","cellule de grille")}}  ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le  [placement de la ligne de base](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_%C3%A9l%C3%A9ments_sur_les_lignes_d_une_grille_CSS) ou lors de la définition des zones par l'utilisation de [zones de grille nommées](/fr/docs/Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille). -

Image showing a highlighted grid area

+![Image showing a highlighted grid area](1_grid_area.png) -

Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L.

+Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L. -

Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}}  et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule.

+Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}}  et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule. -

Exemple

+## Exemple - +``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-template-rows: 100px 100px;
@@ -49,34 +51,30 @@ original_slug: Glossaire/Zones_de_grille
 .item2 {
   grid-area: b;
 }
-
- -
<div class="wrapper">
-   <div class="item1">Item</div>
-   <div class="item2">Item</div>
-</div>
-
+``` -

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

+```html +
+
Item
+
Item
+
+``` +{{ EmbedLiveSample('Exemple', '300', '280') }} -

En apprendre plus

+## En apprendre plus -

Références de propriété

+### Références de propriété - +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-area")}} -

En lire plus

+### 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)_ +- Guide des grilles CSS : _[Définir des zones sur une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille)_ +- [Définition des zones de grille dans la spécification dans les grilles CSS](https://drafts.csswg.org/css-grid/#grid-area-concept) (en) -- cgit v1.2.3-54-g00ecf