From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- .../auto-placement_in_css_grid_layout/index.html | 84 +++++++------------ .../basic_concepts_of_grid_layout/grid2.jpg | Bin 0 -> 14188 bytes .../basic_concepts_of_grid_layout/grid3.jpg | Bin 0 -> 16414 bytes .../basic_concepts_of_grid_layout/index.html | 80 ++++++------------ .../screen_shot_2017-03-17_at_14.47.48.png | Bin 0 -> 19519 bytes .../7_block_axis.png | Bin 0 -> 6902 bytes .../box_alignment_in_css_grid_layout/index.html | 92 ++++++++------------- .../index.html | 43 ++++------ .../css_grid_layout_and_accessibility/index.html | 8 +- .../index.html | 67 ++++++--------- .../css_grid_layout/grid_template_areas/index.html | 52 ++++-------- files/fr/web/css/css_grid_layout/index.html | 12 +-- .../layout_using_named_grid_lines/index.html | 62 ++++++-------- .../line-based_placement_with_css_grid/index.html | 71 ++++++---------- .../index.html | 64 ++++++-------- .../relationship_of_grid_layout/index.html | 62 +++++--------- .../fr/web/css/css_grid_layout/subgrid/index.html | 10 +-- 17 files changed, 245 insertions(+), 462 deletions(-) create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png create mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png (limited to 'files/fr/web/css/css_grid_layout') diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 42060519b3..2fe6ab6f2c 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -16,9 +16,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

-
- 
.wrapper {
   display: grid;
@@ -52,7 +52,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 </div>
-

{{EmbedLiveSample('placement_1', '500', '230')}}

+

{{EmbedLiveSample('Placement_automatique', '500', '230')}}

Définir des règles pour le placement automatique

@@ -65,9 +65,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

-
- 
<div class="wrapper">
   <div>Un</div>
@@ -102,14 +99,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_2', '500', '330')}}

-
+

{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}

+

Dimensionner les lignes avec minmax()

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

-
- 
<div class="wrapper">
   <div>Un</div>
@@ -151,14 +145,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_3', '500', '330')}}

-
+

{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}

+ +

Dimensionner les lignes avec une liste de pistes

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

-
- 
<div class="wrapper">
    <div>Un</div>
@@ -196,8 +188,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_4', '500', '330')}}

-
+

{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}

+

Utiliser le placement automatique pour les colonnes

@@ -205,7 +197,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

-
.wrapper {
   display: grid;
   grid-template-rows: repeat(3, 200px);
@@ -215,8 +206,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
- 
<div class="wrapper">
   <div>Un</div>
@@ -246,8 +235,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 </div>
-

{{EmbedLiveSample('placement_5', '500', '640')}}

-
+

{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}

L'ordre des éléments placés automatiquement

@@ -261,9 +249,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

-
- 
<div class="wrapper">
   <div>Un</div>
@@ -313,8 +298,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_6', '500', '450')}}

-
+

{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}

Gérer les éléments qui s'étalent sur plusieurs pistes

@@ -322,9 +306,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

-
- 
<div class="wrapper">
   <div>Un</div>
@@ -378,8 +359,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_7', '500', '770')}}

-
+

{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}

Combler les espaces

@@ -389,9 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

-
- 
<div class="wrapper">
   <div>Un</div>
@@ -446,8 +423,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 }
-

{{EmbedLiveSample('placement_8', '500', '730')}}

-
+

{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}

Les éléments anonymes de la grille

@@ -467,7 +443,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

-
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
@@ -506,14 +481,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 </ul>
-

{{EmbedLiveSample('placement_9', '500', '1300')}}

-
+

{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

-
- 
<div class="wrapper">
   <dl>
@@ -554,12 +527,11 @@ dd {
 }
-

{{EmbedLiveSample('placement_10', '500', '230')}}

+

{{EmbedLiveSample('Autre_exemple', '500', '230')}}

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

-

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg new file mode 100644 index 0000000000..04c2b6663a Binary files /dev/null and b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg differ diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg new file mode 100644 index 0000000000..c2cf49bfae Binary files /dev/null and b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg differ diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index d4dac05318..800c04293b 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -40,7 +40,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

-

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

+

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

Le conteneur

@@ -64,8 +64,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } -

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

-

Using the Grid Highlighter in DevTools to view a grid

+

Using the Grid Highlighter in DevTools to view a grid

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

@@ -95,13 +93,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

-

+

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

-
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
@@ -117,8 +114,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
-

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
+

L'unité fr

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

-
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
@@ -157,8 +151,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
- -

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

-
+

{{ EmbedLiveSample("L'unité_fr", '220', '140') }}

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

@@ -251,8 +242,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } -

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

@@ -274,7 +263,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

-

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

+

La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

.wrapper {
   display: grid;
@@ -283,8 +272,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
- 
<div class="wrapper">
    <div>Un</div>
@@ -317,7 +304,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 
 
Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

 
-
Grid Lines

+
Grid Lines

 
 
Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

 
@@ -356,8 +343,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
- +

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

@@ -381,17 +367,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

-

The first cell of the grid highlighted

+

The first cell of the grid highlighted

Les zones

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

-

A grid area

+

A grid area

Les gouttières

-

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

+

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}, ou de la propriété raccourcie {{cssxref("gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

.wrapper {
   display: grid;
@@ -402,7 +388,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
-

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

@@ -416,8 +402,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> -

{{ EmbedLiveSample('Les_gouttières') }}

@@ -441,7 +425,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

-
<div class="wrapper">
   <div class="box box1">
     <div class="nested">a</div>
@@ -455,7 +438,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 </div>
-

Nested grid in flow

+

Nested grid in flow

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

@@ -469,8 +452,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } - -
-

{{ EmbedLiveSample('nesting', '600', '340') }}

+

{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}

-

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

+

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

Sous-grille

@@ -517,7 +497,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

-
<div class="wrapper">
   <div class="box box1">Un</div>
   <div class="box box2">Deux</div>
@@ -545,8 +524,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
- -
-

{{ EmbedLiveSample('l_ex', '230', '420') }}

+

{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

@@ -591,8 +567,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } -

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png new file mode 100644 index 0000000000..33e4a5efab Binary files /dev/null and b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png differ diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png new file mode 100644 index 0000000000..d0d2ce3199 Binary files /dev/null and b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png differ diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 7830f9ab48..6721ff8c67 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

-

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

+

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

@@ -22,11 +22,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

-

+

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

-

+

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

@@ -34,6 +34,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

+

Utiliser align-items

+

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

-
- 
.wrapper {
   display: grid;
@@ -102,18 +101,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_1', '500', '450')}}

-
+

{{EmbedLiveSample('utiliser_align-items', '500', '450')}}

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

+

Utiliser align-self

+

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

-
- 
.wrapper {
   display: grid;
@@ -167,8 +164,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_2', '500', '450')}}

-
+

{{EmbedLiveSample('utiliser_align-self', '500', '450')}}

Gestion des objets avec un ratio intrinsèque

@@ -196,9 +192,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

-
- 
.wrapper {
   display: grid;
@@ -251,9 +244,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   <div class="item4">Objet 4</div>
 </div>
- +Justifier_les_objets_sur_laxe_en_ligne_inline_axis

{{EmbedLiveSample('alignment_3', '500', '450')}}

-

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

@@ -267,9 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

-
- 
.wrapper {
   display: grid;
@@ -308,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_4', '500', '480')}}

-
+

{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}

Aligner les pistes d'une grille sur l'axe de bloc

@@ -337,9 +325,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

-
- 
.wrapper {
   display: grid;
@@ -391,14 +378,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_5', '500', '520')}}

-
+

{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}

+ +

Utiliser align-content: end

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

-
- 
.wrapper {
   display: grid;
@@ -451,14 +436,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_6', '500', '520')}}

-
+

{{EmbedLiveSample('align-content_end', '500', '520')}}

+ +

Utiliser align-content: space-between

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

-
- 
.wrapper {
   display: grid;
@@ -511,14 +494,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_7', '500', '1570')}}

-
+

{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

-

+

Justifier les pistes sur l'axe des lignes

@@ -526,9 +508,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

-
- 
.wrapper {
   display: grid;
@@ -582,8 +561,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_8', '500', '500')}}

-
+

{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}

Alignement et marges automatiques

@@ -591,9 +569,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

-
- 
.wrapper {
   display: grid;
@@ -646,12 +621,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
-

{{EmbedLiveSample('alignment_9', '500', '500')}}

-
+

{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

-

+

L'alignement et les modes d'écriture

diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index 6071aa815d..1b93e665ec 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -59,7 +59,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progre

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

-
* {box-sizing: border-box;}
 img {
   max-width: 100%;
@@ -103,22 +102,21 @@ img {
 </div>
-

{{EmbedLiveSample('enhancement_1', '500', '180')}}

-
+

{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

-

A simple example of overriding a floated layout using grid.

+

A simple example of overriding a floated layout using grid.

Utiliser les requêtes de fonctionnalité (feature queries)

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

+

Un exemple plus complexe

+

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

-
- 
.wrapper ul {
   overflow: hidden;
@@ -180,22 +177,23 @@ img {
 </div>
-

{{EmbedLiveSample('enhancement_2', '550', '400')}}

-
+

{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

-

A floated cards layout demonstrating the problem caused by uneven content height.

+

A floated cards layout demonstrating the problem caused by uneven content height.

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

-

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

+

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

-

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

+

Une solution avec les requêtes de fonctionnalité

+ +

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

@supports (display: grid) {
   .wrapper {
@@ -208,11 +206,9 @@ img {
 
 
La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

 
-
On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

+
On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

 
-

-
 
 
.wrapper ul {
     overflow: hidden;
@@ -287,8 +282,7 @@ img {
 </div>
 

 
-
{{EmbedLiveSample('enhancement_3', '550', '480')}}

-

+
{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}

 
 
Surcharger les autres valeurs pour display

 
@@ -296,9 +290,7 @@ img {
 
 
Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

 
-

-
+
 
 
.wrapper ul {
   margin: 0 -10px;
@@ -374,8 +366,7 @@ img {
 </div>
 

 
-
{{EmbedLiveSample('enhancement_4', '500', '480')}}

-

+
{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}

 
 
Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

 
diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
index ccde0b5c42..2270ae2deb 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
+++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
@@ -47,9 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
 
 
Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

 
-

-
 
 
.wrapper {
   display: grid;
@@ -88,8 +85,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
 </div>
 

 
-
{{EmbedLiveSample('accessibility_1', '500', '330')}}

-

+
{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}

 
 
Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

 
diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index b8ec3a91d3..d43798fd7f 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -42,7 +42,7 @@ original_slug: >-
 
 
Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

 
-
A simple example of text direction.

+
A simple example of text direction.

 
 
Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

 
@@ -54,7 +54,7 @@ original_slug: >-
 
 
Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

 
-
An image showing the default direction of the Block and Inline Axes.

+
An image showing the default direction of the Block and Inline Axes.

 
 
Les modes d'écriture CSS

 
@@ -74,9 +74,7 @@ original_slug: >-
 
 
Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

 
-

-
 
 
<div class="wrapper">
   <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
@@ -94,18 +91,17 @@ original_slug: >-
 </div>
 

 
-
{{EmbedLiveSample('writing_1', '500', '420')}}

-

+
{{EmbedLiveSample("writing-mode", '500', '420')}}

 
 
La gestion des modes d'écriture avec une grille

 
 
Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

 
+
Mode d'écriture par défaut

+
 
Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

 
-

-
 
 
.wrapper {
   display: grid;
@@ -140,14 +135,13 @@ original_slug: >-
 </div>
 

 
-
{{EmbedLiveSample('writing_2', '500', '330')}}

-

+
{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}

+
+
Définir writing-mode

 
 
Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

 
-

-
 
 
.wrapper {
   writing-mode: vertical-lr;
@@ -183,10 +176,9 @@ original_slug: >-
 </div>
 

 
-
{{EmbedLiveSample('writing_3', '500', '330')}}

-

+
{{EmbedLiveSample("definir_writing-mode", '500', '330')}}

 
-
A image showing the direction of Block and Inline when writing-mode is vertical-lr

+
A image showing the direction of Block and Inline when writing-mode is vertical-lr

 
 
L'utilisation de valeurs logiques pour l'alignement

 
@@ -194,9 +186,7 @@ original_slug: >-
 
 
Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

 
-

-
 
 
.wrapper {
   writing-mode: vertical-lr;
@@ -248,8 +237,7 @@ original_slug: >-
 </div>
 

 
-
{{EmbedLiveSample('writing_4', '500', '330')}}

-

+
{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}

 
 
Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

 
@@ -269,9 +257,9 @@ original_slug: >-
  
  • L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
    • 
 
 
-
    
-
+
    {{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}
    
+
+
    Placement sur les lignes pour du texte de droite à gauche
    
 
 
    Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.
    
 
-
    
-
 
 
    .wrapper {
   direction: rtl;
@@ -365,8 +351,7 @@ original_slug: >-
 </div>
 
    
 
-
    {{EmbedLiveSample('writing_6', '500', '330')}}
    
-
    
+
    {{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}
    
 
 
    On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.
    
 
@@ -398,7 +383,6 @@ original_slug: >-
 
 
    Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.
    
 
-
    
 
    .wrapper {
   display: grid;
   grid-gap: 20px;
@@ -435,12 +419,11 @@ original_slug: >-
 </div>
 
    
 
-
    {{EmbedLiveSample('writing_7', '500', '330')}}
    
-
    
+
    {{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}
    
 
 
    Les valeurs physiques et les grilles CSS
    
 
-
    On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
    
+
    On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
    
 
 
    Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.
    
 
diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
index 259dd33bbc..2b45f2fac6 100644
--- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
    {{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")}}
    
 
-
    Dans le guide précédent, 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 !
    
+
    Dans le guide précédent, 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 !
    
 
 
    Donner un nom à une zone de grille
    
 
@@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
    Ici, on définit les quatre lignes qui entourent la zone en question :
    
 
-
    The Grid Area defined by lines
    
+
    The Grid Area defined by lines
    
 
 
    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 :
    
 
@@ -37,11 +37,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
  
  • Le contenu principale (content)
    • 
 
 
-
    An image showing a simple two column layout with header and footer
    
+
    An image showing a simple two column layout with header and footer
    
 
 
    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 :
    
 
-
    
 
    .header {
   grid-area: hd;
 }
@@ -69,8 +68,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
    
 
-
 
 
    <div class="wrapper">
   <div class="header">En-tête</div>
@@ -97,8 +94,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   <div class="footer">Pied de page</div>
 </div>
    
 
-
    {{EmbedLiveSample('Grid_Area_1', '300', '330')}}
    
-
    
+
    {{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}
    
 
 
    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")}}.
    
 
@@ -120,8 +116,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
    - 
    .wrapper {
   display: grid;
@@ -159,7 +153,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   <div class="footer">Pied de page</div>
 </div>
    -

    {{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

    +

    {{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}

    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.

    @@ -183,8 +177,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } - 
    .wrapper {
   display: grid;
@@ -215,16 +207,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
    - -

    {{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

    +

    {{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}

    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.

    @@ -236,8 +226,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille

    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 :

    - 
    .header {
   grid-area: hd;
@@ -302,14 +290,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
    -

    {{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

    @@ -317,15 +303,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille

    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.

    +

    Exemple d'objet média

    +

    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.

    -

    Images showing an example media object design

    +

    Images showing an example media object design

    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.

    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.

    -
    * {box-sizing: border-box;}
 
 .media {
@@ -361,14 +348,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   </div>
 </div>
    -

    {{EmbedLiveSample('Media_1', '300', '200')}}

    -
    +

    {{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}

    Afficher l'image de l'autre côté

    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")}}.

    -
    * {box-sizing: border-box;}
 
 .media {
@@ -409,8 +394,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   </div>
 </div>
    -

    {{EmbedLiveSample('Media_2', '300', '200') }}

    -
    +

    {{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}

    Les propriétés raccourcies pour les grilles CSS

    @@ -463,7 +447,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
  • {{cssxref("grid-auto-flow")}}
    • -

    Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

    +

    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.

    On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

    diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html index b097f662db..6d622ed3af 100644 --- a/files/fr/web/css/css_grid_layout/index.html +++ b/files/fr/web/css/css_grid_layout/index.html @@ -18,8 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout

    Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.

    -

    HTML

    @@ -85,7 +83,6 @@ translation_of: Web/CSS/CSS_Grid_Layout

    Propriétés CSS

    -
    • {{cssxref("grid-template-columns")}}
    • {{cssxref("grid-template-rows")}}
      • @@ -106,17 +103,14 @@ translation_of: Web/CSS/CSS_Grid_Layout
    • {{cssxref("column-gap")}}
    • {{cssxref("gap")}}
    -

    Fonctions CSS

    -
    • {{cssxref("repeat", "repeat()")}}
    • {{cssxref("minmax", "minmax()")}}
    • {{cssxref("fit-content", "fit-content()")}}
    -

    Types de donnée CSS

    @@ -124,7 +118,6 @@ translation_of: Web/CSS/CSS_Grid_Layout

    Termes définis dans le glossaire

    -
    -

    Guides

    -
    -

    Ressources externes

    diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index a7fbb6e569..d31fb16a38 100644 --- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -19,9 +19,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril

    Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

    -
    -

    Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

    @@ -79,8 +76,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> -

    {{EmbedLiveSample('example_named_lines', '500', '330')}}

    -
    +

    {{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}

    +

    Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

    @@ -94,9 +91,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril

    Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

    -
    -

    On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

    @@ -133,8 +127,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> -

    {{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

    -
    +

    {{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}

    Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

    @@ -166,13 +159,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril

    Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

    -

    An image showing the implicit line names created by our grid areas.

    +

    An image showing the implicit line names created by our grid areas.

    On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

    -
    - 
    .wrapper {
   display: grid;
@@ -231,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
    -

    {{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

    -
    +

    {{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}

    Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

    @@ -240,11 +229,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril

    Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

    +

    Une grille à 12 colonnes avec repeat()

    +

    Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

    -
    - 
    .wrapper {
   display: grid;
@@ -286,12 +274,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
 </div>
    -

    {{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

    -
    +

    {{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}

    Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

    -

    The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

    +

    The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

    + +

    Définir des lignes nommées avec une liste de piste

    La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

    @@ -316,9 +305,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril

    Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

    -
    - 
    .wrapper {
   display: grid;
@@ -355,14 +341,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
    -

    {{EmbedLiveSample('span_line_number', '500', '330')}}

    -
    +

    {{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}

    + +

    Cadre d'une grille à 12 colonnes

    Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

    Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

    -
    .wrapper {
   display: grid;
   grid-gap: 10px;
@@ -372,8 +358,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
    On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :
    
 
-
 
 
    <div class="wrapper">
   <header class="main-header">Je suis l'en-tête</header>
@@ -420,12 +404,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 }
 
    
 
-
    {{EmbedLiveSample('three_column', '500', '330')}}
    
+
    {{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}
    
 
 
    Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :
    
 
-
    The layout with the grid highlighted.
    
-
    +

    The layout with the grid highlighted.

    +

    Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

    diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 96ba332efb..08aff7df63 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un

    Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

    -

    Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

    +

    Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

    Un exemple simple

    @@ -24,10 +24,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un

    Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

    -

    Our Grid highlighted in DevTools

    +

    Our Grid highlighted in DevTools

    - 
    .wrapper {
   display: grid;
@@ -66,7 +64,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
    On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :
    
 
-
    
 
    .box1 {
    grid-column-start: 1;
    grid-column-end: 2;
@@ -75,12 +72,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
    
 
-
    Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.
    
+
    Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.
    
 
 
    On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.
    
 
-
 
 
    <div class="wrapper">
    <div class="box1">Un</div>
@@ -129,16 +124,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
    
 
-
    {{EmbedLiveSample('Line_Number', '300', '330')}}
    
-
    
+
    {{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}
    
+
 
-
    
 
    Les propriétés raccourcies grid-column et grid-row
    
 
 
    On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.
    
 
-
 
 
    <div class="wrapper">
   <div class="box1">Un</div>
@@ -185,16 +177,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
    
 
-
    {{EmbedLiveSample('Grid_Shorthands', '300', '330')}}
    
-
    
+
    {{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}
    
 
-
    La taille par défaut
    
+
    La taille par défaut
    
 
 
    Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :
    
 
-
    
-
 
 
    <div class="wrapper">
   <div class="box1">Un</div>
@@ -244,14 +232,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
    
 
-
    {{EmbedLiveSample('End_Lines', '300', '330')}}
    
-
    
+
    {{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}
    
+
+
    Tailles par défaut avec les propriétés raccourcies
    
 
 
    Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).
    
 
-
    
-
 
 
    <div class="wrapper">
   <div class="box1">Un</div>
@@ -298,8 +284,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
    
 
-
    {{EmbedLiveSample('New_Shorthand', '300', '330')}}
    
-
    
+
    {{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}
    
 
 
    La propriété grid-area
    
 
@@ -312,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
  
  • grid-column-end
    • 
 
 
-
 
 
    <div class="wrapper">
   <div class="box1">Un</div>
@@ -358,7 +341,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
    {{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}
    
 
-
    L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :
    
+
    L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :
    
 
 
      
  
    • block-start
      • 
@@ -377,8 +360,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
      Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.
      
 
-
 
 
      <div class="wrapper">
    <div class="box1">Un</div>
@@ -446,18 +427,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
      Les gouttières
      
 
-
      La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.
      
+
      La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.
      
 
 
      
-
      Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.
      
+
      Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.
      
 
 
      Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.
      
 
      
 
 
      Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
@@ -515,7 +494,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
      Les propriétés raccourcies pour les gouttières
      
 
-
      Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.
      
+
      Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.
      
 
 
      .wrapper {
   display: grid;
@@ -531,8 +510,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
      On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index ca59709909..b7af0ce06d 100644
--- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -15,21 +15,19 @@ original_slug: >-
 
 
      {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}
      
 
-
      Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.
      
+
      Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.
      
 
 
      Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas
      
 
 
      De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.
      
 
-
      Image of the three different layouts created by redefining our grid at two breakpoints.
      
+
      Image of the three different layouts created by redefining our grid at two breakpoints.
      
 
-
      Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.
      
+
      Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.
      
 
 
      Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.
      
 
-
      
-
 
 
      <div class="wrapper">
   <header class="main-head">L'en-tête</header>
@@ -114,7 +111,7 @@ nav ul {
 }
 
      
 
-
      Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :
      
+
      Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :
      
 
 
      @media (min-width: 500px) {
   .wrapper {
@@ -155,8 +152,7 @@ nav ul {
 
 
      Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.
      
 
-
      {{EmbedLiveSample('layout_1', '800', '430')}}
      
-
      
+
      {{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}
      
 
 
      Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.
      
 
@@ -164,9 +160,7 @@ nav ul {
 
 
      Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.
      
 
-
      
-
 
 
      .wrapper {
   display: grid;
@@ -216,24 +209,21 @@ nav ul {
 }
 
      
 
-
      {{EmbedLiveSample('layout_2', '800', '330')}}
      
-
      
+
      {{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}
      
 
-
      Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.
      
+
      Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.
      
 
 
      Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.
      
 
-
      Showing the items placed on the grid with grid tracks highlighted.
      
+
      Showing the items placed on the grid with grid tracks highlighted.
      
 
 
      Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.
      
 
-
      Construire une disposition avec ce système à 12 colonnes
      
+
      Construire une disposition avec ce système à 12 colonnes
      
 
 
      Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :
      
 
-
      
-
 
 
      <div class="wrapper">
   <header class="main-head">L'en-tête</header>
@@ -350,22 +339,20 @@ nav ul {
 }
 
      
 
-
      {{EmbedLiveSample('layout_3', '800', '430')}}
      
-
      
+
      {{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}
      
 
 
      On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :
      
 
-
      Showing the layout with grid tracks highlighted by the grid inspector.
      
+
      Showing the layout with grid tracks highlighted by the grid inspector.
      
 
 
      On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..
      
 
 
      Une liste produit utilisant le placement automatique
      
 
-
      De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.
      
+
      De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.
      
 
 
      Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.
      
 
-
      
 
      <ul class="listing">
   <li>
     <h2>Produit n°1</h2>
@@ -398,8 +385,7 @@ nav ul {
 </ul>
 
      
 
-
 
 
      Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.
      
 
@@ -454,18 +439,17 @@ h2 {
 
 
      Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.
      
 
-
      {{EmbedLiveSample('layout_4', '800', '900')}}
      
-
      
+
      {{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}
      
+
+
      Empêcher les espaces avec dense
      
 
 
      Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :
      
 
-
      The layout has gaps as there is not space to layout a two track item.
      
+
      The layout has gaps as there is not space to layout a two track item.
      
 
 
      Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.
      
 
-
      
-
 
 
      .listing {
   list-style: none;
@@ -544,10 +527,9 @@ h2 {
 }
 
      
 
-
      {{EmbedLiveSample('layout_5', '800', '900')}}
      
+
      {{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}
      
 
 
      Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.
      
-
      
 
 
      Aller plus loin
      
 
diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 6cfbf09b73..f32d5cd4b9 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Les grilles et les boîtes flexibles (flexbox)
      
 
-
      La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.
      
+
      La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.
      
 
 
      Disposition sur une dimension ou sur deux dimensions
      
 
@@ -20,9 +20,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.
      
 
-
      
-
 
 
      <div class="wrapper">
   <div>Un</div>
@@ -58,9 +55,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   flex: 1 1 150px;
 }
 
      
-
      
 
-
      {{EmbedLiveSample('onedtwod', '500', '230')}}
      
+
      {{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}
      
 
 
      On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.
      
 
@@ -70,9 +66,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.
      
 
-
      
-
 
 
      <div class="wrapper">
   <div>Un</div>
@@ -105,7 +98,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 
      
 
-
      
 
      {{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}
      
 
 
      Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :
      
@@ -133,8 +125,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
@@ -178,8 +168,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
@@ -233,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.
      
 
-
 
 
      <div class="wrapper">
   <div>Un</div>
@@ -273,8 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.
      
 
-
 
 
      <div class="wrapper">
   <div>Un</div>
@@ -319,8 +303,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
@@ -379,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :
      
 
-
      Image of grid container as parent
      
+
      Image of grid container as parent
      
 
 
      Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.
      
 
@@ -389,8 +371,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.
      
 
-
 
 
      <div class="wrapper">
   <div class="box1">Un</div>
@@ -458,9 +438,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.
      
 
-
      
-
 
 
      <div class="wrapper">
   <div class="box box1">
@@ -509,14 +488,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
      
 
-
      {{EmbedLiveSample('Display_Contents_Before', '400', '420')}}
      
-
      
+
      {{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}
      
 
+
      Utiliser display contents après
      
+  
 
      Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.
      
 
-
      
-
 
 
      <div class="wrapper">
   <div class="box box1">
@@ -565,8 +542,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 
      
 
-
      {{EmbedLiveSample('Display_Contents_After', '400', '330')}}
      
-
      
+
      {{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}
      
 
 
      Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.
      
 
diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html
index 10eee83ae2..bfd9bb1b1b 100644
--- a/files/fr/web/css/css_grid_layout/subgrid/index.html
+++ b/files/fr/web/css/css_grid_layout/subgrid/index.html
@@ -12,8 +12,8 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
 
      La valeur subgrid a été ajoutée par le module de spécification CSS Grid Layout de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.
      
 
-
      
-
      Attention ! Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger Firefox Nightly afin de tester les exemples ci-après.
      
+
      
+
      Attention : Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger Firefox Nightly afin de tester les exemples ci-après.
      
 
      
 
 
      Une introduction à subgrid
      
@@ -72,7 +72,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
 
      Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.
      
 
-
      The smaller item displays in the gap as row-gap is set to 0 on the subgrid.
      
+
      The smaller item displays in the gap as row-gap is set to 0 on the subgrid.
      
 
 
      Les lignes nommées
      
 
@@ -106,7 +106,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
   
    {{SpecName("CSS Grid 2")}}
    {{Spec2("CSS Grid 2")}}
-   Définition initiale des sous-grilles (subgrids).
+   Définition initiale des sous-grilles (subgrids).
   
  
 
@@ -114,5 +114,5 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
      Voir aussi
      
 
 
-- 
cgit v1.2.3-54-g00ecf