From 1768b43f574673545e1f2a20e92a27b050a2bb53 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 31 Aug 2021 21:19:43 +0200 Subject: Fixes #2218 (#2272) --- .../relationship_of_grid_layout/index.html | 83 ++++++++++------------ 1 file changed, 37 insertions(+), 46 deletions(-) (limited to 'files') 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 65525f21d4..6cfbf09b73 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 @@ -1,18 +1,11 @@ --- title: Le modèle de grille et les autres modèles de disposition slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout -tags: - - CSS - - CSS Grids - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition ---
{{CSSRef}}
-

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

-

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

Les grilles et les boîtes flexibles (flexbox)

@@ -29,7 +22,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
@@ -56,7 +49,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   width: 500px;
   display: flex;
   flex-wrap: wrap;
@@ -79,7 +72,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
@@ -106,14 +99,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
 

 
-
{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

 

+
{{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 :

 
@@ -141,7 +134,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="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px;
@@ -179,14 +172,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('Box_alignment', '300', '230')}}

+
{{EmbedLiveSample('Lalignement_des_boîtes', '300', '230')}}

 
 
L'alignement sur les grilles CSS

 
 
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="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
@@ -224,7 +217,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

 
-
{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

+
{{EmbedLiveSample('Lalignement_sur_les_grilles_CSS', '200', '310')}}

 
 
L'unité fr et flex-basis

 
@@ -241,7 +234,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 class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
 }
 

 
-
{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

+
{{EmbedLiveSample('Des_pistes_qui_se_remplissent_automatiquement', '500', '170')}}

 
 
Avoir un nombre de pistes flexible

 
@@ -281,7 +274,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 class="wrapper">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 

 
-
{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

+
{{EmbedLiveSample('Avoir_un_nombre_de_pistes_flexible', '500', '170')}}

 
 
On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

 
@@ -327,7 +320,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="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">
@@ -358,7 +351,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -376,7 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

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

+
{{EmbedLiveSample('Avoir_une_grille_comme_bloc_englobant', '500', '330')}}

 
 
On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

 
@@ -397,7 +390,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="wrapper">
   <div class="box1">Un</div>
   <div class="box2">Deux</div>
   <div class="box3">Trois
@@ -429,7 +422,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -453,7 +446,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 

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

+
{{EmbedLiveSample('Utiliser_une_zone_de_grille_comme_parent', '500', '420')}}

 
 
Utiliser une grille et display: contents

 
@@ -467,7 +460,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box box1">
     <div class="nested">a</div>
     <div class="nested">b</div>
@@ -504,7 +497,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -523,7 +516,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
   <div class="box box1">
     <div class="nested">a</div>
     <div class="nested">b</div>
@@ -560,7 +553,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </div>
 

 
-
.wrapper {
+
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -585,5 +578,3 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
  
  • Guides sur Flexbox
    • 
  
  • Guides sur la disposition multi-colonnes
    • 
 
-
-
    {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
    
-- 
cgit v1.2.3-54-g00ecf