diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 20:15:31 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-17 20:15:31 +0200 |
| commit | 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch) | |
| tree | 09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr/web/css/css_grid_layout | |
| parent | 3518481e9190f19bbf81741704f45cb3c1761758 (diff) | |
| download | translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2 translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip | |
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 <span style=...>
* 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
Diffstat (limited to 'files/fr/web/css/css_grid_layout')
17 files changed, 245 insertions, 462 deletions
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 <p>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.</p> -<div id="placement_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} + +<h2 id="Placement_automatique">Placement automatique</h2> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -34,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -52,7 +52,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_1', '500', '230')}}</p> +<p>{{EmbedLiveSample('Placement_automatique', '500', '230')}}</p> </div> <h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2> @@ -65,9 +65,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p> -<div id="placement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -83,7 +81,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -102,14 +99,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}</p> +<h3 id="Dimensionner_les_lignes_avec_minmax">Dimensionner les lignes avec minmax()</h3> <p>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.</p> -<div id="placement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -125,7 +120,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -151,14 +145,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}</p> + +<h3 id="Dimensionner_les_lignes_avec_une_liste_de_pistes">Dimensionner les lignes avec une liste de pistes</h3> <p>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 <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p> -<div id="placement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -174,7 +167,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -196,8 +188,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}</p> + <h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3> @@ -205,7 +197,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>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.</p> -<div id="placement_5"> <pre class="brush: css">.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 } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -232,7 +222,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -246,8 +235,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS </div> </pre> -<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p> -</div> +<p>{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}</p> <h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2> @@ -261,9 +249,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>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.</p> -<div id="placement_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -279,7 +265,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -313,8 +298,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}</p> <h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3> @@ -322,9 +306,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>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.</p> -<div id="placement_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -339,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -378,8 +359,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p> -</div> +<p>{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}</p> <h3 id="Combler_les_espaces">Combler les espaces</h3> @@ -389,9 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>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 (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p> -<div id="placement_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -406,7 +384,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS color: #d9480f; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -446,8 +423,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS } </pre> -<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p> -</div> +<p>{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}</p> <h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3> @@ -467,7 +443,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS <p>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 <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p> -<div id="placement_9"> <pre class="brush: css">.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> </pre> -<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p> -</div> +<p>{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}</p> <p>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 <code>dt</code> démarre sur la première ligne et que l'élément <code>dd</code> 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.</p> -<div id="placement_10"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="Autre_exemple">Autre exemple</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -521,7 +495,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS background-color: #fff4e6; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <dl> @@ -554,12 +527,11 @@ dd { } </pre> -<p>{{EmbedLiveSample('placement_10', '500', '230')}}</p> +<p>{{EmbedLiveSample('Autre_exemple', '500', '230')}}</p> <div class="note"> <p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p> </div> -</div> <h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2> 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 Binary files differnew file mode 100644 index 0000000000..04c2b6663a --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg 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 Binary files differnew file mode 100644 index 0000000000..c2cf49bfae --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg 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 <p>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")}}.</p> -<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> +<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p> <h2 id="Le_conteneur">Le conteneur</h2> @@ -64,8 +64,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -79,13 +78,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p> <p>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 <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p> -<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14791/Screen%20Shot%202017-03-17%20at%2014.47.48.png" style="height: 551px; width: 846px;"></p> +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="screen_shot_2017-03-17_at_14.47.48.png"></p> <p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p> @@ -95,13 +93,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>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 <em>piste</em> 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.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 400px; width: 600px;"></p> +<p><img alt="" src="1_grid_track.png"></p> <p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p> <p>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.</p> -<div id="grid_first"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -117,8 +114,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -132,16 +128,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> -</div> + <h3 id="L'unité_fr">L'unité fr</h3> <p>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é, <code>fr</code>, 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.</p> -<div id="fr_unit_ls"> <pre class="brush: html"><div class="wrapper"> <div>Un</div> <div>Deux</div> @@ -157,8 +151,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -172,10 +165,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> -</div> +<p>{{ EmbedLiveSample("L'unité_fr", '220', '140') }}</p> <p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. 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.</p> @@ -251,8 +242,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -266,7 +256,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p> @@ -274,7 +263,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>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.</p> -<p>La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> 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 <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> +<p>La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> 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 <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p> <pre class="brush: css">.wrapper { display: grid; @@ -283,8 +272,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -297,7 +285,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; color: #d9480f; }</pre> -</div> <pre class="brush: html"><div class="wrapper"> <div>Un</div> @@ -317,7 +304,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>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.</p> -<p><img alt="Grid Lines" src="https://mdn.mozillademos.org/files/14793/GRID2.jpg" style="height: 456px; width: 764px;"></p> +<p><img alt="Grid Lines" src="grid2.jpg"></p> <p>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.</p> @@ -356,8 +343,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -371,7 +357,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> + <p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p> @@ -381,17 +367,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>Une <em>cellule</em> 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.</p> -<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 400px; width: 600px;"></p> +<p><img alt="The first cell of the grid highlighted" src="1_grid_cell.png"></p> <h2 id="Les_zones">Les zones</h2> <p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. 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.</p> -<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 400px; width: 600px;"></p> +<p><img alt="A grid area" src="1_grid_area.png"></p> <h2 id="Les_gouttières">Les gouttières</h2> -<p>Les <em>gouttière</em><em>s</em> 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.</p> +<p>Les <em>gouttière</em><em>s</em> 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.</p> <pre class="brush: css">.wrapper { display: grid; @@ -402,7 +388,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </pre> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>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 <code>grid-</code>.</p> </div> @@ -416,8 +402,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -431,7 +416,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample('Les_gouttières') }}</p> @@ -441,7 +425,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>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.</p> -<div id="nesting"> <pre class="brush: html"><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> </pre> -<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14795/grid3.jpg" style="height: 512px; width: 900px;"></p> +<p><img alt="Nested grid in flow" src="grid3.jpg"></p> <p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p> @@ -469,8 +452,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -490,12 +472,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> +<p>{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}</p> -<p>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.</p> +<p>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.</p> <h3 id="Sous-grille">Sous-grille</h3> @@ -517,7 +497,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base <p>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.</p> -<div id="l_ex"> <pre class="brush: html"><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 } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -560,10 +538,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> +<p>{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}</p> <p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p> @@ -591,8 +567,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="box box1">Un</div> <div class="box box2">Deux</div> <div class="box box3">Trois</div> @@ -601,7 +576,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base </div> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -615,7 +590,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base color: #d9480f; } </pre> -</div> <p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p> 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 Binary files differnew file mode 100644 index 0000000000..33e4a5efab --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png 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 Binary files differnew file mode 100644 index 0000000000..d0d2ce3199 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png 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 <p>{{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")}}</p> -<p>Si vous connaissez <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles (flexbox)</a> 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 <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> +<p>Si vous connaissez <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (flexbox)</a> 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 <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p> <p>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.</p> @@ -22,11 +22,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>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 (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p> -<p><img src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img src="7_block_axis.png"></p> <p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> +<p><img alt="" src="7_inline_axis.png"></p> <p>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.</p> @@ -34,6 +34,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>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é.</p> +<h3 id="utiliser_align-items">Utiliser align-items</h3> + <p>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 :</p> <ul> @@ -48,9 +50,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <li><code>last baseline</code></li> </ul> -<div id="alignment_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -66,7 +66,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -102,18 +101,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-items', '500', '450')}}</p> <p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code><div></code> sera déterminée par le contenu du <code><div></code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code><div></code> sera étiré afin de remplir la zone de la grille.</p> <p>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 <code>align-self</code> pour les objets.</p> +<h3 id="utiliser_align-self">Utiliser align-self</h3> + <p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p> -<div id="alignment_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -129,7 +127,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -167,8 +164,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_align-self', '500', '450')}}</p> <h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3> @@ -196,9 +192,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Là encore, la valeur par défaut <code>stretch</code> 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.</p> -<div id="alignment_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -214,7 +208,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.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> </pre> - +Justifier_les_objets_sur_laxe_en_ligne_inline_axis <p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p> -</div> <p>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.</p> @@ -267,9 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p> -<div id="alignment_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -285,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -308,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}</p> <h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2> @@ -337,9 +325,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>La propriété <code>align-content</code> 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 <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p> -<div id="alignment_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="alignement_par_defaut">Alignement par défaut</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -355,7 +343,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -391,14 +378,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}</p> + +<h3 id="align-content_end">Utiliser align-content: end</h3> <p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p> -<div id="alignment_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -414,7 +400,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -451,14 +436,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end', '500', '520')}}</p> + +<h3 id="align-content_end_space-between">Utiliser align-content: space-between</h3> <p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p> -<div id="alignment_7"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -474,7 +458,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -511,14 +494,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p> -</div> +<p>{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}</p> <p>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.</p> <p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. 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.</p> -<p><img src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> +<p><img src="7_space-between.png"></p> <h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2> @@ -526,9 +508,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p> -<div id="alignment_8"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +524,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -582,8 +561,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}</p> <h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2> @@ -591,9 +569,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C <p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p> -<div id="alignment_9"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -609,7 +585,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -646,12 +621,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C </div> </pre> -<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p> -</div> +<p>{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}</p> <p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p> -<p><img src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> +<p><img src="7_auto_margins.png"></p> <h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2> 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 <p>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.</p> -<div id="enhancement_1"> <pre class="brush: css">* {box-sizing: border-box;} img { max-width: 100%; @@ -103,22 +102,21 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p> -</div> +<p>{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}</p> <p>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.</p> -<p><img alt="A simple example of overriding a floated layout using grid." src="https://mdn.mozillademos.org/files/14743/10-float-simple-override.png" style="height: 308px; width: 1620px;"></p> +<p><img alt="A simple example of overriding a floated layout using grid." src="10-float-simple-override.png"></p> <h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3> <p>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.</p> +<h4 id="un_exemple_plus_complexe">Un exemple plus complexe</h4> + <p>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.</p> -<div id="enhancement_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -135,7 +133,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -180,22 +177,23 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p> -</div> +<p>{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}</p> <p>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.</p> -<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="https://mdn.mozillademos.org/files/14745/10-floated-cards.png" style="height: 536px; width: 550px;"></p> +<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="10-floated-cards.png"></p> <p>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…</p> <p>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.</p> -<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="https://mdn.mozillademos.org/files/14747/10-float-width-problem.png" style="height: 721px; width: 550px;"></p> +<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="10-float-width-problem.png"></p> <p>Si on réinitialise la largeur avec <code>auto</code>, 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 <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p> -<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> 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.</p> +<h4 id="une_solution_avec_les_requetes_de_fonctionnalité">Une solution avec les requêtes de fonctionnalité</h4> + +<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a> 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.</p> <pre class="brush: css">@supports (display: grid) { .wrapper { @@ -208,11 +206,9 @@ img { <p>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.</p> -<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> 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.</p> +<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> 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.</p> -<div id="enhancement_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -229,7 +225,6 @@ img { color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper ul { overflow: hidden; @@ -287,8 +282,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p> -</div> +<p>{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}</p> <h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2> @@ -296,9 +290,7 @@ img { <p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, 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.</p> -<div id="enhancement_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -316,7 +308,7 @@ img { color: #d9480f; } </pre> -</div> + <pre class="brush: css">.wrapper ul { margin: 0 -10px; @@ -374,8 +366,7 @@ img { </div> </pre> -<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p> -</div> +<p>{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}</p> <p>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é <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p> 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é <p>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.</p> -<div id="accessibility_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -65,7 +63,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -88,8 +85,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité </div> </pre> -<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}</p> <p>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.</p> 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: >- <p>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 <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> 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 <code>text-align value: left</code>, l'alignement reste à gauche.</p> -<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p> +<p><img alt="A simple example of text direction." src="8_direction_simple_example.png"></p> <p>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.</p> @@ -54,7 +54,7 @@ original_slug: >- <p>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 (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p> -<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p> +<p><img alt="An image showing the default direction of the Block and Inline Axes." src="8-horizontal-tb.png"></p> <h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2> @@ -74,9 +74,7 @@ original_slug: >- <p>Sur le Web, c'est la valeur <code>horizontal-tb</code> 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 <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. 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 (<em>inline</em>) est donc l'axe vertical.</p> -<div id="writing_1"> -<div class="hidden"> -<pre class="brush: css">.wrapper > p { +<pre class="brush: css hidden">.wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; @@ -86,7 +84,6 @@ original_slug: >- max-width: 300px; } </pre> -</div> <pre class="brush: html"><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> </pre> -<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p> -</div> +<p>{{EmbedLiveSample("writing-mode", '500', '420')}}</p> <h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2> <p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p> +<h3 id="Mode_d'écriture_par_défaut">Mode d'écriture par défaut</h3> + <p>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.</p> -<div id="writing_2"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -121,7 +117,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -140,14 +135,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}</p> + +<h3 id="definir_writing-mode">Définir writing-mode</h3> <p>Si on ajoute <code>writing-mode: vertical-lr</code> 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.</p> -<div id="writing_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -163,7 +157,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -183,10 +176,9 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("definir_writing-mode", '500', '330')}}</p> -<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p> +<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="8-vertical-lr.png"></p> <h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2> @@ -194,9 +186,7 @@ original_slug: >- <p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> 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.</p> -<div id="writing_4"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +202,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { writing-mode: vertical-lr; @@ -248,8 +237,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}</p> <p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p> @@ -269,9 +257,9 @@ original_slug: >- <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li> </ul> -<div id="writing_5"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3 id="placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite">Placement sur les lignes pour du texte de gauche à droite</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -314,14 +302,13 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}</p> + +<h3 id="placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche">Placement sur les lignes pour du texte de droite à gauche</h3> <p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p> -<div id="writing_6"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -337,7 +324,6 @@ original_slug: >- color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { direction: rtl; @@ -365,8 +351,7 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}</p> <p>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.</p> @@ -398,7 +383,6 @@ original_slug: >- <p>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.</p> -<div id="writing_7"> <pre class="brush: css">.wrapper { display: grid; grid-gap: 20px; @@ -435,12 +419,11 @@ original_slug: >- </div> </pre> -<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}</p> <h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2> -<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">l'alignement des boîtes et les grilles</a>, 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.</p> +<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">l'alignement des boîtes et les grilles</a>, 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.</p> <p>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 <code>ltr</code> à un mode <code>rtl</code>.</p> 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 <p>{{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")}}</p> -<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">le guide précédent</a>, 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 <em>zones</em> 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 !</p> +<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">le guide précédent</a>, 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 <em>zones</em> 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 !</p> <h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2> @@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>Ici, on définit les quatre lignes qui entourent la zone en question :</p> -<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> +<p><img alt="The Grid Area defined by lines" src="4_area.png"></p> <p>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 :</p> @@ -37,11 +37,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>Le contenu principale (<em>content</em>)</li> </ul> -<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> +<p><img alt="An image showing a simple two column layout with header and footer" src="4_layout.png"></p> <p>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 :</p> -<div id="Grid_Area_1"> <pre class="brush: css">.header { grid-area: hd; } @@ -69,8 +68,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +86,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: html"><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></pre> -<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}</p> <p>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")}}.</p> @@ -120,8 +116,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -139,7 +134,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.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></pre> -<p>{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}</p> +<p>{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}</p> <p>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.</p> @@ -183,8 +177,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -202,7 +195,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -215,16 +207,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> -<p>{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}</p> +<p>{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}</p> <p>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.</p> @@ -236,8 +226,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>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 :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -255,7 +244,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille color: #d9480f; } </pre> -</div> <pre class="brush: css">.header { grid-area: hd; @@ -302,14 +290,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille } </pre> -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html hidden"><div class="wrapper"> <div class="header">En-tête</div> <div class="sidebar">Barre latérale</div> <div class="content">Contenu</div> <div class="footer">Pied de page</div> </div></pre> -</div> <p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p> @@ -317,15 +303,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <p>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.</p> +<h3 id="Exemple_d'objet_média">Exemple d'objet média</h3> + <p>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.</p> -<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> +<p><img alt="Images showing an example media object design" src="4_media_objects.png"></p> <p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. 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 <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p> <p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p> -<div id="Media_1"> <pre class="brush: css">* {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></pre> -<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}</p> <h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3> <p>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 <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p> -<div id="Media_2"> <pre class="brush: css">* {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></pre> -<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p> -</div> +<p>{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}</p> <h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2> @@ -463,7 +447,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille <li>{{cssxref("grid-auto-flow")}}</li> </ul> -<p>Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> +<p>Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p> <p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p> 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 <p>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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; @@ -32,7 +31,6 @@ translation_of: Web/CSS/CSS_Grid_Layout padding: 1em; color: #d9480f; }</pre> -</div> <h3 id="HTML">HTML</h3> @@ -85,7 +83,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("grid-template-columns")}}</li> <li>{{cssxref("grid-template-rows")}}</li> @@ -106,17 +103,14 @@ translation_of: Web/CSS/CSS_Grid_Layout <li>{{cssxref("column-gap")}}</li> <li>{{cssxref("gap")}}</li> </ul> -</div> <h3 id="Fonctions_CSS">Fonctions CSS</h3> -<div class="index"> <ul> <li>{{cssxref("repeat", "repeat()")}}</li> <li>{{cssxref("minmax", "minmax()")}}</li> <li>{{cssxref("fit-content", "fit-content()")}}</li> </ul> -</div> <h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3> @@ -124,7 +118,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3> -<div class="index"> <ul> <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li> <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li> @@ -136,11 +129,9 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li> <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li> </ul> -</div> <h2 id="Guides">Guides</h2> -<div class="index"> <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li> @@ -155,7 +146,6 @@ translation_of: Web/CSS/CSS_Grid_Layout <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li> </ul> -</div> <h2 id="Ressources_externes">Ressources externes</h2> 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 <p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, 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.</p> -<div id="example_named_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -37,7 +35,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>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 <code>content-start</code> et <code>content-end</code>), à 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.</p> @@ -79,8 +76,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}</p> + <p>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 <em>responsive</em> 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 <em>media queries</em>.</p> @@ -94,9 +91,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> 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 <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p> -<div id="implicit_areas_from_lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -112,7 +107,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p> @@ -133,8 +127,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}</p> <p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p> @@ -166,13 +159,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p> -<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> +<p><img alt="An image showing the implicit line names created by our grid areas." src="5_multiple_lines_from_areas.png"></p> <p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p> -<div id="implicit_lines_from_area"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -188,7 +179,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -231,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}</p> <p>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.</p> @@ -240,11 +229,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>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 <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p> +<h3 id="une_grille_à_12_colonnes_avec_repeat">Une grille à 12 colonnes avec repeat()</h3> + <p>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 (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p> -<div id="multiple_lines_same_name"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -260,7 +249,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.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></pre> -<p>{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}</p> <p>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 :</p> -<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> +<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="5_named_lines1.png"></p> + +<h3 id="Définir_des_lignes_nommées_avec_une_liste_de_piste">Définir des lignes nommées avec une liste de piste</h3> <p>La syntaxe <code>repeat()</code> 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 (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p> @@ -316,9 +305,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril <p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p> -<div id="span_line_number"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -334,7 +321,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -355,14 +341,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril </div> </pre> -<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}</p> + +<h3 id="cadre_d_une_grille_à_12_colonnes">Cadre d'une grille à 12 colonnes</h3> <p>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.</p> <p>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 <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> 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 <em>framework</em> se résume à :</p> -<div class="three_column"> <pre class="brush: css">.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 <p>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 :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -389,7 +374,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('three_column', '500', '330')}}</p> +<p>{{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}</p> <p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p> -<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> -</div> +<p><img alt="The layout with the grid highlighted." src="5_named_lines2.png"></p> + <p>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 <code>1fr</code>. 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 !</p> 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 <p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, 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.</p> -<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain guide</a>.</p> +<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain guide</a>.</p> <h2 id="Un_exemple_simple">Un exemple simple</h2> @@ -24,10 +24,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>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 <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p> -<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> +<p><img alt="Our Grid highlighted in DevTools" src="3_hilighted_grid.png"></p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -43,7 +42,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -66,7 +64,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>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 :</p> -<div id="Line_Number"> <pre class="brush: css">.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 } </pre> -<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">un prochain guide</a> 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.</p> +<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">un prochain guide</a> 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.</p> <p>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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -99,7 +95,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}</p> + -<div id="Grid_Shorthands"> <h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2> <p>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")}}.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -157,7 +150,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}</p> -<h3 id="La_taille_par_défaut">La taille par défaut</h3> +<h2 id="La_taille_par_défaut">La taille par défaut</h2> <p>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 <code>grid-column-end</code> ou <code>grid-row-end</code>. 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 :</p> -<div id="End_Lines"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -213,7 +202,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}</p> + +<h3 id="Tailles_par_défaut_avec_les_propriétés_raccourcies">Tailles par défaut avec les propriétés raccourcies</h3> <p>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).</p> -<div id="New_Shorthand"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -270,7 +257,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}</p> <h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2> @@ -312,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <li><code>grid-column-end</code></li> </ul> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -332,7 +316,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p> -<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). 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 <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> +<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). 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 <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p> <ul> <li><code>block-start</code></li> @@ -377,8 +360,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -397,7 +379,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <h2 id="Les_gouttières">Les gouttières</h2> -<p>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.</p> +<p>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.</p> <div class="note"> -<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p> +<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p> <p>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 <code>grid-</code>.</p> </div> <p>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 :</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -476,7 +456,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3> -<p>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 <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> +<p>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 <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p> <pre class="brush: css">.wrapper { display: grid; @@ -531,8 +510,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un <p>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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -551,7 +529,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un color: #d9480f; } </pre> -</div> <pre class="brush: html"><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: >- <p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p> -<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">les zones nommées d'une grille</a>, 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.</p> +<p>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 <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">les zones nommées d'une grille</a>, 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.</p> <h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2> <p>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 <em>responsive</em>, 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.</p> -<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="11-responsive-areas.png"></p> -<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">dans l'article correspondant</a></em>.</p> +<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">dans l'article correspondant</a></em>.</p> <p>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é.</p> -<div id="layout_1"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -50,7 +48,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -114,7 +111,7 @@ nav ul { } </pre> -<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Requêtes_média">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> +<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Media_Queries">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p> <pre class="brush: css">@media (min-width: 500px) { .wrapper { @@ -155,8 +152,7 @@ nav ul { <p>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.</p> -<p>{{EmbedLiveSample('layout_1', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}</p> <p>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 <code>ad</code> 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.</p> @@ -164,9 +160,7 @@ nav ul { <p>Si vous travaillez avec un <em>framework</em> 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 <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p> -<div id="layout_2"> -<div class="hidden"> -<pre class="brush: css">.wrapper { +<pre class="brush: css hidden">.wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em Helvetica, arial, sans-serif; @@ -178,7 +172,6 @@ nav ul { padding: 10px; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -216,24 +209,21 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p> -</div> +<p>{{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}</p> -<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomméees_sur_une_grille">le guide sur le nommage des lignes</a>, 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.</p> +<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">le guide sur le nommage des lignes</a>, 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.</p> <p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> 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é <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p> -<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="11-grid-inspector-12col.png"></p> <p>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 <em>stricte</em>, 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.</p> -<h3 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h3> +<h2 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h2> <p>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 :</p> -<div id="layout_3"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { max-width: 1024px; @@ -254,7 +244,6 @@ nav ul { padding: 0; } </pre> -</div> <pre class="brush: html"><div class="wrapper"> <header class="main-head">L'en-tête</header> @@ -350,22 +339,20 @@ nav ul { } </pre> -<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p> -</div> +<p>{{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}</p> <p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p> -<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="11-grid-inspector-12col-layout.png"></p> <p>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..</p> <h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2> -<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : 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 <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> +<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : 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 <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p> <p>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.</p> -<div id="layout_4"> <pre class="brush: html"><ul class="listing"> <li> <h2>Produit n°1</h2> @@ -398,8 +385,7 @@ nav ul { </ul> </pre> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -418,7 +404,6 @@ h2 { padding: 20px; } </pre> -</div> <p>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 <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p> @@ -454,18 +439,17 @@ h2 { <p>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.</p> -<p>{{EmbedLiveSample('layout_4', '800', '900')}}</p> -</div> +<p>{{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}</p> + +<h2 id="empecher_les_espaces_avec_dense">Empêcher les espaces avec dense</h2> <p>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 <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. 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 :</p> -<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 1664px; width: 1640px;"></p> +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="11-grid-auto-flow-sparse.png"></p> <p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>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 (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p> -<div id="layout_5"> -<div class="hidden"> -<pre class="brush: html"><ul class="listing"> +<pre class="brush: html hidden"><ul class="listing"> <li> <h2>Item One</h2> <div class="body"><p>The content of this listing item goes here.</p></div> @@ -497,7 +481,7 @@ h2 { </ul> </pre> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em Helvetica, arial, sans-serif; @@ -529,7 +513,6 @@ h2 { padding: 10px; } </pre> -</div> <pre class="brush: css">.listing { list-style: none; @@ -544,10 +527,9 @@ h2 { } </pre> -<p>{{EmbedLiveSample('layout_5', '800', '900')}}</p> +<p>{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}</p> <p>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.</p> -</div> <h2 id="Aller_plus_loin">Aller plus loin</h2> 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 <h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2> -<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles CSS</a>, 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.</p> +<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles CSS</a>, 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.</p> <h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3> @@ -20,9 +20,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p> -<div id="onedtwod"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -38,7 +36,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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; } </pre> -</div> -<p>{{EmbedLiveSample('onedtwod', '500', '230')}}</p> +<p>{{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}</p> <p>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.</p> @@ -70,9 +66,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. 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.</p> -<div class="Two_Dimensional_With_Grid"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -88,7 +82,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 } </pre> -</div> <p>{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}</p> <p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p> @@ -133,8 +125,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>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 <code>flex-end</code> 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 <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -150,7 +141,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>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 à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. 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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -195,7 +184,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> 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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -250,7 +237,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -290,7 +275,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>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 <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -336,7 +319,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>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 <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p> -<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> +<p><img alt="Image of grid container as parent" src="2_abspos_example.png"></p> <p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p> @@ -389,8 +371,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d <p>On indique que <code>.box3</code> 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.</p> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -406,7 +387,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d color: #d9480f; } </pre> -</div> <pre class="brush: html"><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 <p>Si on utilise <code>display:</code> <code>contents</code> 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.</p> -<div id="Display_Contents_Before"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<h3>Utiliser display contents avant</h3> + +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -482,7 +462,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><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 </pre> -<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}</p> +<h3>Utiliser display contents après</h3> + <p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, 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.</p> -<div id="Display_Contents_After"> -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -538,7 +516,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d padding: 1em; } </pre> -</div> <pre class="brush: html"><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 } </pre> -<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p> -</div> +<p>{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}</p> <p>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 » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p> 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 <p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> 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.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p> </div> <h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2> @@ -72,7 +72,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>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.</p> -<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p> +<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="gap.png"></p> <h2 id="Les_lignes_nommées">Les lignes nommées</h2> @@ -106,7 +106,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <tr> <td>{{SpecName("CSS Grid 2")}}</td> <td>{{Spec2("CSS Grid 2")}}</td> - <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> + <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td> </tr> </tbody> </table> @@ -114,5 +114,5 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">Les concepts de bases des grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">Les concepts de bases des grilles CSS</a></li> </ul> |
