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 --- .../css_grid_layout/grid_template_areas/index.html | 52 ++++++++-------------- 1 file changed, 18 insertions(+), 34 deletions(-) (limited to 'files/fr/web/css/css_grid_layout/grid_template_areas') 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 :

    -- cgit v1.2.3-54-g00ecf