diff options
Diffstat (limited to 'files/fr/web/css/css_grid_layout')
13 files changed, 5828 insertions, 0 deletions
diff --git a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html new file mode 100644 index 0000000000..8353f2c29e --- /dev/null +++ b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html @@ -0,0 +1,661 @@ +--- +title: L'alignement des boîtes avec les grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS +tags: + - CSS + - CSS Grid + - Grille CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<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>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> + +<h2 id="Les_deux_axes_dune_grille">Les deux axes d'une grille</h2> + +<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><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>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> + +<h2 id="Aligner_des_objets_sur_laxe_de_bloc_block_axis">Aligner des objets sur l'axe de bloc (<em>block axis</em>)</h2> + +<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> + +<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> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<div id="alignment_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; + align-items: start; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p> +</div> + +<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> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + align-self: start; +} +.item3 { + grid-area: c; + align-self: end; +} +.item4 { + grid-area: d; + align-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p> +</div> + +<h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3> + +<p>La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur <code>start</code>. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.</p> + +<p>Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs <code>start</code> pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.</p> + +<h2 id="Justifier_les_objets_sur_laxe_en_ligne_inline_axis">Justifier les objets sur l'axe en ligne (<em>inline axis</em>)</h2> + +<p>{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour <code>align-self</code> :</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + justify-self: start; +} +.item3 { + grid-area: c; + justify-self: end; +} +.item4 { + grid-area: d; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<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> + +<p>Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.</p> + +<h3 id="Propriétés_raccourcies">Propriétés raccourcies</h3> + +<p>La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.</p> + +<h2 id="Centrer_un_objet_sur_une_zone">Centrer un objet sur une zone</h2> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + grid-auto-rows: 200px; + grid-template-areas: + ". a a ." + ". a a ."; +} +.item1 { + grid-area: a; + align-self: center; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p> +</div> + +<h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2> + +<p>Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.</p> + +<p>La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p> + +<p>Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :</p> + +<ul> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: end; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p> +</div> + +<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> + +<h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2> + +<p>Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; + justify-content: space-around; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p> +</div> + +<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2> + +<p>Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser <code>auto</code> pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant <code>auto</code> pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; + margin-left: auto; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p> +</div> + +<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> + +<h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2> + +<p>Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions <em>physiques</em>.</p> + +<p>Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut <code>justify-content: start</code> placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec <code>margin-right</code> ou <code>margin-left</code> ou si on utilise le positionnement absolu avec les valeurs <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.</p> + +<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> diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html new file mode 100644 index 0000000000..44e85dda1f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html @@ -0,0 +1,560 @@ +--- +title: Construire des dispositions courantes avec des grilles CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<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> + +<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>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>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;} + +.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} + +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">L'en-tête</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>L'article principal</h1> + <p> + Dans cette disposition, on affiche les zones dans le même + ordre que dans le document pour les écrans dont la largeur + est inférieure à 500 pixels. On passe à une disposition sur + deux colonnes ou trois colonnes en redéfinissant la grille + et le placement des objets sur la grille. + </p> + </article> + <aside class="side">Barre latérale</aside> + <div class="ad">Publicité</div> + <footer class="main-footer">Le pied de page</footer> +</div> +</pre> + +<p>On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes <em>media queries</em>. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">le guide sur les grilles CSS et l'accessibilité</a></em>). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</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> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête <code>header</code> s'étale sur deux colonnes et le bloc <code>nav</code> également. Sur la troisième ligne, on a la barre latérale (<code>sidebar</code>) à côté du contenu (<code>content</code>). Sur la quatrième ligne, on a le bloc pour la publicité (<code>ad</code>) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.</p> + +<p>Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>Cette disposition en trois colonnes possède une première colonne qui s'étend sur <code>1fr</code>, une colonne centrale qui s'étend sur <code>4fr</code> et une dernière colonne qui mesure également <code>1fr</code>. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.</p> + +<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>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> + +<h2 id="Une_disposition_flexible_avec_12_colonnes">Une disposition flexible avec 12 colonnes</h2> + +<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 { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div> + <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div> + <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div> + <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div> +</div> +</pre> + +<p>Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé <code>span</code> :</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p> +</div> + +<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>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>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> + +<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;} + +.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} + +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">L'en-tête</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>L'article principal</h1> + <p> + Dans cette disposition, on affiche les zones dans le même + ordre que dans le document pour les écrans dont la largeur + est inférieure à 500 pixels. On passe à une disposition sur + deux colonnes ou trois colonnes en redéfinissant la grille + et le placement des objets sur la grille. + </p> + </article> + <aside class="side">Barre latérale</aside> + <div class="ad">Publicité</div> + <footer class="main-footer">Le pied de page</footer> +</div> +</pre> + +<p>On initialise la grille avec nos 12 colonnes :</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.</p> + +<p>Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée <code>col-start</code> et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).</p> + +<p>Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p> +</div> + +<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>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>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> + <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div> + <div class="cta"><a href="">Faire quelque chose !</a></div> + </li> + <li> + <h2>Produit n°2</h2> + <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div> + <div class="cta"><a href="">Faire quelque chose !</a></div> + </li> + <li class="wide"> + <h2>Produit n°3</h2> + <div class="body"><p>Le descriptif du produit sera écrit ici.</p> + <p>Ce produit possède un descriptif beaucoup plus long.</p> + <p>Vraiment plus long</p> + <p>Peut-être faudrait-il le gérer différemment ?</p></div> + <div class="cta"><a href="">Faire quelque chose !</a></div> + </li> + <li> + <h2>Produit n°4</h2> + <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div> + <div class="cta"><a href="">Faire quelque chose !</a></div> + </li> + <li> + <h2>Produit n°5</h2> + <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div> + <div class="cta"><a href="">Faire quelque chose !</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +img {max-width: 100%; display: block;} +body { + font: 1.2em Helvetica, arial, sans-serif; +} + +a:link, a:visited { + text-decoration: none; + color: #f08c00; +} + +h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + 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> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.</p> + +<p>On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise <code>display: flex</code> et <code>flex-direction</code> avec la valeur <code>column</code>. On ajoute une marge automatique pour la classe <code>.cta</code> afin que cette barre soit placée en bas de la boîte.</p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<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>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>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"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} +img {max-width: 100%; display: block;} +body { + font: 1.2em Helvetica, arial, sans-serif; +} +a:link, a:visited { + text-decoration: none; + color: #f08c00; +} +h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; +} +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{EmbedLiveSample('layout_5', '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> + +<p>La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un <em>framework</em> ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.</p> + +<ul> + <li>Vous pouvez consulter le <a href="https://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons (en anglais)</a>, elle a créé différentes disposition en se basant sur une variété d'exemples.</li> + <li>Pour d'autres exemples, vous pouvez vous référer à <em><a href="https://gridbyexample.com">Grid by Example</a></em> qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.</li> +</ul> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html new file mode 100644 index 0000000000..be9c0122a7 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html @@ -0,0 +1,482 @@ +--- +title: Définir des zones sur une grille +slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +<div>{{CSSRef}}</div> + +<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> + +<h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2> + +<p>On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :</p> + +<pre class="brush: css">.box1 { + grid-area: 1 / 1 / 4 / 2; +} +</pre> + +<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>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> + +<ul> + <li>Un en-tête (<em>header</em>)</li> + <li>Un pied de page (<em>footer</em>)</li> + <li>Une barre latérale (<em>sidebar</em>)</li> + <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>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; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<p>Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><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> + +<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p> +</div> + +<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> + +<h2 id="Laisser_une_cellule_vide">Laisser une cellule vide</h2> + +<p>Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.</p> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + ". . . ft ft ft ft ft ft"; +} +</pre> + +<pre class="brush: html"><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> + +<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> + +<h2 id="Occuper_plusieurs_cellules">Occuper plusieurs cellules</h2> + +<p>Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que <code>hd</code> et <code>ft</code> soient alignés avec <code>main</code>).</p> + +<p>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par <code>sd</code>.</p> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><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>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> + +<h2 id="Redéfinir_une_grille_à_avec_des_media_queries">Redéfinir une grille à avec des <em>media queries</em></h2> + +<p>Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.</p> + +<p>Pour ce faire, on définit les noms des zones en dehors de toute <em>media query</em> afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} + +.wrapper { + display: grid; + grid-auto-rows: minmax(100px, auto); + grid-template-columns: 1fr; + grid-template-areas: + "hd" + "main" + "sd" + "ft"; +} +</pre> + +<p>On peut ensuite redéfinir la disposition à l'intérieur des différentes <em>media queries</em> utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec <code>grid-template-areas</code>.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: repeat(9, 1fr); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; + } +} +@media (min-width: 700px) { + .wrapper { + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd main main main main main ft ft"; + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><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> + +<h2 id="Utiliser_grid-template-areas_pour_des_éléments_d'interface_utilisateur">Utiliser <code>grid-template-areas</code> pour des éléments d'interface utilisateur</h2> + +<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> + +<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>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 { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; +} +</pre> + +<pre class="brush: html"><div class="media"> + <div class="image"></div> + <div class="text"> + Dans cet exemple, on peut utiliser + grid-template-areas pour échanger les + places du texte et du media. + </div> +</div></pre> + +<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p> +</div> + +<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 { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media.flipped { + grid-template-columns: 3fr 1fr; + grid-template-areas: "content img"; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; +} +</pre> + +<pre class="brush: html"><div class="media flipped"> + <div class="image"></div> + <div class="text"> + Dans cet exemple, on peut utiliser + grid-template-areas pour échanger les + places du texte et du media. + </div> +</div></pre> + +<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p> +</div> + +<h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2> + +<p>Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.</p> + +<p>Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.</p> + +<p>Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle <strong>mais aussi</strong> qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.</p> + +<p>Les deux propriétés raccourcies pour les grilles sont <code>grid-template</code> et <code>grid</code>.</p> + +<h3 id="grid-template"><code>grid-template</code></h3> + +<p>La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :</p> + +<ul> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> +</ul> + +<p>Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.</p> + +<p>Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template: + "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +</pre> + +<p>La première valeur correspond à celle de <code>grid-template-areas</code> mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec <code>minmax(100px, auto)</code>).</p> + +<p>Après la valeur de <code>grid-template-areas</code>, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.</p> + +<h3 id="grid"><code>grid</code></h3> + +<p>La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :</p> + +<ul> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <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>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> + +<pre class="brush: css">.wrapper { + display: grid; + grid: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +</pre> + +<p>Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété <code>grid-auto-flow</code>.</p> + +<p>Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.</p> + +<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> diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..b097f662db --- /dev/null +++ b/files/fr/web/css/css_grid_layout/index.html @@ -0,0 +1,193 @@ +--- +title: Grilles CSS (CSS Grid) +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Grilles CSS + - Reference +translation_of: Web/CSS/CSS_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<p>Le module <em><strong>CSS Grid layout</strong></em> (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.</p> + +<p>Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.</p> + +<h2 id="Un_exemple_simple">Un exemple simple</h2> + +<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;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">Un</div> + <div class="two">Deux</div> + <div class="three">Trois</div> + <div class="four">Quatre</div> + <div class="five">Cinq</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}</p> + +<h2 id="Référence">Référence</h2> + +<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> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("row-gap")}}</li> + <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> + +<p>{{cssxref("<flex>")}}</p> + +<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> + <li><a href="/fr/docs/Glossaire/Grid_Tracks">Pistes</a></li> + <li><a href="/fr/docs/Glossaire/Grid_Cell">Cellules</a></li> + <li><a href="/fr/docs/Glossaire/Grid_Areas">Zones</a></li> + <li><a href="/fr/docs/Glossaire/Gutters">Gouttières</a></li> + <li><a href="/fr/docs/Glossaire/Grid_Axis">Axe</a></li> + <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> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Le modèle de grille et les autres modèles de disposition</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Utiliser des lignes nommées sur une grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Définir des zones sur une grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique sur une grille</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS, les valeurs logiques et les modes d'écriture</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles CSS et l'accessibilité</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li> + <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> + +<ul> + <li><a href="http://labs.jensimmons.com/">Des exemples créés par Jen Simmons (en anglais)</a></li> + <li><a href="http://gridbyexample.com/">Les grilles CSS par l'exemple - un ensemble d'exemples et de tutoriels (en anglais)</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">La référence Codrops sur les grilles CSS (en anglais)</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">L'inspecteur de grille dans les outils de développement Firefox</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">Le bac à sable CSS Grid (en anglais)</a></li> + <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">Les grilles CSS et Internet Explorer 11</a> (<a href="https://github.com/motine/css_grid_annotator">prothèse - <em>polyfill</em></a>)</li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Grid 2')}}</td> + <td>{{Spec2("CSS Grid 2")}}</td> + <td>Ajout des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">« sous-grilles » (<em>subgrids</em>)</a>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html new file mode 100644 index 0000000000..c6395dbee9 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html @@ -0,0 +1,625 @@ +--- +title: Les concepts de base des grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Le module <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.</p> + +<h2 id="Qu'est-ce_qu'une_grille">Qu'est-ce qu'une grille ?</h2> + +<p>Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :</p> + +<h3 id="Pistes_à_taille_fixe_ou_variable">Pistes à taille fixe ou variable</h3> + +<p>On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité <code>fr</code> créée à cet effet.</p> + +<h3 id="Placement_des_éléments">Placement des éléments</h3> + +<p>Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.</p> + +<h3 id="Création_de_pistes_supplémentaires_pour_du_contenu">Création de pistes supplémentaires pour du contenu</h3> + +<p>Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».</p> + +<h3 id="Contrôle_de_l'alignement">Contrôle de l'alignement</h3> + +<p>On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.</p> + +<h3 id="Contrôle_des_contenus_qui_se_chevauchent">Contrôle des contenus qui se chevauchent</h3> + +<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> + +<h2 id="Le_conteneur">Le conteneur</h2> + +<p>À partir du moment où on crée un <em>conteneur</em> en déclarant la propriété <code>display: grid</code> ou <code>display: inline-grid</code> sur un élément, tous les <em>enfants directs </em>de cet élément deviennet des <em>éléments de grille</em>.</p> + +<p>Cet exemple montre une div avec une classe <code>.wrapper</code>, avec cinq éléments enfants.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<p>On transforme <code>.wrapper</code> en conteneur.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + 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>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p> + +<p>Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.</p> + +<h2 id="Les_pistes">Les pistes</h2> + +<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>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> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + 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> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> +</div> + +<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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative <code>fr</code>.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Utiliser_la_notation_repeat()_pour_définir_les_pistes">Utiliser la notation <code>repeat()</code> pour définir les pistes</h3> + +<p>Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation <code>repeat()</code> pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>peut également s'écrire :</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="Grille_implicite_et_grille_explicite">Grille implicite et grille explicite</h3> + +<p>Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.</p> + +<p>On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</p> + +<p>Dans l'exemple ci-après nous utilisons <code>grid-auto-rows</code> pour que les rangées de la grille implicite fassent 200 pixels de haut.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p> + +<h3 id="Dimensionner_une_piste_avec_minmax">Dimensionner une piste avec <code>minmax</code></h3> + +<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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux + <p>Davantage de contenu.</p> + <p>On dépasse les 100 pixels.</p> + </div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}</p> + +<h2 id="Lignes_de_grille">Lignes de grille</h2> + +<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>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> + +<h3 id="Positionnement_des_éléments_sur_les_lignes">Positionnement des éléments sur les lignes</h3> + +<p>Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.</p> + +<p>Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.</p> + +<p>Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> + <div class="box5">Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p> + +<p>Pensez à utiliser l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grille</a> dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.</p> + +<h2 id="Les_cellules">Les cellules</h2> + +<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> + +<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> + +<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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</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>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> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Les_gouttières') }}</p> + +<p>L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité <code>fr</code>. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.</p> + +<h2 id="Grilles_imbriquées">Grilles imbriquées</h2> + +<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> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Deux</div> + <div class="box box3">Trois</div> + <div class="box box4">Quatre</div> + <div class="box box5">Cinq</div> +</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>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> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('nesting', '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> + +<h3 id="Sous-grille">Sous-grille</h3> + +<p>Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée <em>sous-grille</em> qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. <em>Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer.</em> Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer <code>display: grid</code> par <code>display: subgrid, </code>et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.</p> + +<p>Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer <code>grid-template-columns: repeat(3, 1fr)</code> en <code>grid-template-columns: subgrid</code>. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: subgrid; +} +</pre> + +<h2 id="Superposer_les_éléments_avec_z-index">Superposer les éléments avec <code>z-index</code></h2> + +<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> + <div class="box box3">Trois</div> + <div class="box box4">Quatre</div> + <div class="box box5">Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '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> + +<h3 id="Contrôler_l’ordre_de_superposition">Contrôler l’ordre de superposition</h3> + +<p>On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété <code>z-index</code>. Si nous donnons à <code>box2</code> un <code>z-index</code> inférieur à celui de <code>box1</code>, l'élément <code>box2</code> s'affichera sous <code>box1</code> dans la pile.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">Un</div> + <div class="box box2">Deux</div> + <div class="box box3">Trois</div> + <div class="box box4">Quatre</div> + <div class="box box5">Cinq</div> +</div> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p> + +<h2 id="La_suite">La suite</h2> + +<p>Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.</p> + +<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html new file mode 100644 index 0000000000..6e2751382d --- /dev/null +++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html @@ -0,0 +1,124 @@ +--- +title: Les grilles CSS et l'accessibilité +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité +tags: + - Accessibilité + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.</p> + +<p>Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que <a href="https://www.csszengarden.com/">CSS Zen Garden</a> montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.</p> + +<p><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a> n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?</p> + +<h2 id="Réordonner_le_contenu_dans_une_grille_CSS">Réordonner le contenu dans une grille CSS</h2> + +<p>Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser <code>grid-auto-flow: dense</code> pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.</p> + +<p><a href="https://drafts.csswg.org/css-grid/#order-accessibility">La spécification</a> contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.</p> + +<blockquote> +<p>La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">tabindex</a></code>).</p> +</blockquote> + +<p>Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.</p> + +<p>La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.</p> + +<blockquote> +<p>Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.</p> +</blockquote> + +<p>Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?</p> + +<h3 id="Un_ré-ordonnancement_visuel_et_non_logique">Un ré-ordonnancement visuel et non logique</h3> + +<p>La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement <em>visuelle</em>. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column: 1; + grid-row: 2; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"><a href="">Un</a></div> + <div class="box box2"><a href="">Deux</a></div> + <div class="box box3"><a href="">Trois</a></div> + <div class="box box4"><a href="">Quatre</a></div> + <div class="box box5"><a href="">Cinq</a></div> +</div> +</pre> + +<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p> +</div> + +<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> + +<h2 id="Comment_prendre_en_compte_l'accessibilité_avec_une_disposition_en_grille">Comment prendre en compte l'accessibilité avec une disposition en grille ?</h2> + +<p>On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?</p> + +<dl> + <dt>Démarrer avec un document structuré et accessible</dt> + <dd>Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.</dd> + <dt>Créer une grille adaptative correcte</dt> + <dd>Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?</dd> + <dt>Revenir à la source</dt> + <dd>Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.</dd> +</dl> + +<h2 id="Les_grilles_et_le_risque_d'aplatir_le_document_à_outrance">Les grilles et le risque d'aplatir le document à outrance</h2> + +<p>On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est <em>cet</em> <code>ul</code> qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.</p> + +<p>Si la valeur <code>subgrid</code> est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que <em>sous-grille</em>. Actuellement, la seule solution à notre disposition est d'utiliser <code>display: contents</code> afin que la boîte générée par l'élément <code>ul</code> disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">l'article sur les liens entre les grilles et les autres méthodes de disposition</a> et notamment la section sur <code><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition#Utiliser_une_grille_et_display_contents">display: contents</a></code>.</p> + +<p>Étant donné que la prise en charge de <code>display: contents</code> pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec <code>ul</code>, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a <code>display: grid</code>. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.</p> + +<h2 id="Approfondir_la_question">Approfondir la question</h2> + +<p>Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).</p> + +<p>Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em> (en anglais).</p> + +<p>Pour construire votre réflexion sur ce sujet, je vous invite à lire <em><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the Keyboard Navigation Disconnect</a></em> écrit par Léonie Watson. <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">La vidéo de la présentation de Léonie à ffconf</a> est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié <a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">un article sur l'ordre de la navigation au clavier dans les différents navigateurs</a> bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.</p> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html new file mode 100644 index 0000000000..8a5122de2f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html @@ -0,0 +1,420 @@ +--- +title: Les grilles CSS et l'amélioration progressive +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (<em>CSS Grid</em>). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.</p> + +<h2 id="Les_navigateurs_qui_prennent_en_charge_les_grilles_CSS">Les navigateurs qui prennent en charge les grilles CSS</h2> + +<p>En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.</p> + +<h2 id="La_situation_pour_Internet_Explorer_et_Edge">La situation pour Internet Explorer et Edge</h2> + +<p>La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.</p> + +<p>La version implémentée pour IE/Edge (≤15) est préfixée avec <code>-ms</code> et les propriétés ont les noms suivants :</p> + +<ul> + <li>{{cssxref("grid-template-columns")}} est appelée <code>-ms-grid-columns</code></li> + <li>{{cssxref("grid-template-rows")}} est appelée <code>-ms-grid-rows</code></li> + <li>{{cssxref("grid-row-start")}} est appelée <code>-ms-grid-row</code></li> + <li>{{cssxref("grid-column-start")}} est appelée <code>-ms-grid-column</code></li> + <li>{{cssxref("align-self")}} est appelée <code>-ms-grid-row-align</code></li> + <li>{{cssxref("justify-self")}} est appelée <code>-ms-grid-column-align</code></li> +</ul> + +<p>La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : <code>-ms-grid-column-span</code> et <code>-ms-grid-row-span</code>. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par <code>-ms</code>. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.</p> + +<h3 id="L'utilisation_d'autoprefixer_pour_la_prise_en_charge_de_la_grille">L'utilisation d'autoprefixer pour la prise en charge de la grille</h3> + +<p>L'outil <em><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></em> a été mis à jour afin de prendre en charge les versions préfixées par <code>-ms-</code> lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option <code>grid: autoplace</code>.</p> + +<pre class="brush: js">autoprefixer({ grid: 'autoplace' })</pre> + +<p>Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées</p> + +<h2 id="Puis-je_utiliser_les_grilles_CSS_sans_danger">Puis-je utiliser les grilles CSS sans danger ?</h2> + +<p>Comme pour les autres technologies <em>front-end</em>, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.</p> + +<h2 id="Commencer_à_utiliser_les_grilles_CSS_en_production">Commencer à utiliser les grilles CSS en production</h2> + +<p>On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.</p> + +<h3 id="Effectuer_la_transition_depuis_une_disposition_flottante">Effectuer la transition depuis une disposition flottante</h3> + +<p>Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">des dispositions flottantes</a>. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.</p> + +<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%; + display: block; +} +.media { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} +.media::after { + content: ""; + display: block; + clear: both; +} +.media .image { + float: left; + width: 150px; + margin-right: 20px; +} +.media .text { + padding: 10px; + align-self: end; +} +</pre> + +<pre class="brush: html"><div class="media"> + <div class="image"> + <img src="http://placehold.it/150x150" alt="placeholder"> + </div> + <div class="text"> + Voici un exemple avec un média. On utilise le flottement + pour les anciens navigateurs et une grille pour les + nouveaux. + </div> +</div> +</pre> + +<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p> +</div> + +<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> + +<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> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 600px; + margin: 0 auto; +} +.wrapper li { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper ul { + overflow: hidden; + margin: 0 -10px; + padding: 0; + list-style: none; +} +.wrapper li { + float: left; + width: calc(33.333333% - 20px); + margin: 0 10px 20px 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <ul> + <li class="card"> + <h2>Un</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Deux</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Trois</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Quatre</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Cinq</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Six</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + </ul> +</div> +</pre> + +<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p> +</div> + +<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>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>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> + +<pre class="brush: css">@supports (display: grid) { + .wrapper { + // ajouter les règles qu'on souhaite + // pour les navigateurs qui prennent + // en charge les grilles + } +} +</pre> + +<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> + +<div id="enhancement_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 600px; + margin: 0 auto; +} +.wrapper li { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper ul { + overflow: hidden; + margin: 0 -10px; + padding: 0; + list-style: none; +} +.wrapper li { + float: left; + width: calc(33.333333% - 20px); + margin: 0 10px 20px 10px; +} +@supports (display: grid) { + .wrapper ul { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + margin: 0; + } + .wrapper li { + width: auto; + min-height: auto; + margin: 0; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <ul> + <li class="card"> + <h2>Un</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Deux</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Trois</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Quatre</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Cinq</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Six</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + </ul> +</div> +</pre> + +<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p> +</div> + +<h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2> + +<p>Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple <code>display: inline-block</code>.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 600px; + margin: 0 auto; +} + +.wrapper li { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper ul { + margin: 0 -10px; + padding: 0; + list-style: none; +} + +.wrapper li { + display: inline-block; + vertical-align: top; + width: calc(33.333333% - 20px); + margin: 0 10px 20px 10px; +} +@supports (display: grid) { + .wrapper ul { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + margin: 0; + } + .wrapper li { + width: auto; + margin: 0; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <ul> + <li class="card"> + <h2>Un</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Deux</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Trois</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Quatre</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Cinq</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + <li class="card"> + <h2>Six</h2> + <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p> + </li> + </ul> +</div> +</pre> + +<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p> +</div> + +<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> + +<h2 id="Comment_la_spécification_gère-t-elle_cette_surcharge">Comment la spécification gère-t-elle cette surcharge ?</h2> + +<p>La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :</p> + +<ul> + <li><a href="https://drafts.csswg.org/css-grid/#grid-containers">La création de conteneurs de grille (<em>Establishing Grid Containers</em>)</a></li> + <li><a href="https://drafts.csswg.org/css-grid/#grid-items">Les objets de la grille (<em>Grid Items</em>)</a></li> + <li><a href="https://drafts.csswg.org/css-grid/#grid-item-display">L'affichage d'un objet de la grille (<em>Grid Item Display</em>)</a></li> +</ul> + +<p>Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.</p> + +<h3 id="Les_autres_valeurs_de_display">Les autres valeurs de <code> display</code></h3> + +<p>Lorsqu'un élément possède un parent pour lequel <code>display: grid</code>, cet élément devient un bloc (cf. <a href="https://drafts.csswg.org/css-display-3/#blockify">la specification</a>). C'est pour cela que, pour l'élément qui utilisait <code>inline-block</code>, <code>display: inline-block</code> ne s'appliquait plus.</p> + +<p>Si la disposition historique utilise <code>display: table</code>, un élément avec <code>display: table-cell</code> génèrera des boîtes anonymes. Aussi, si on utilise <code>display: table-cell</code> sans élément parent avec <code>display-table</code>, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un <code>div</code> ou autre pour lequel on aurait défini <code>display: table</code>). Si on a un objet pour lequel <code>display: table-cell</code> et que, dans une requête de fonctionnalité, on utilise <code>display: grid</code> pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger <code>display: table</code> sans avoir ces boîtes anonymes supplémentaires.</p> + +<h3 id="Les_éléments_flottants">Les éléments flottants</h3> + +<p>Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement <code>float: none</code> sur les éléments.</p> + +<h3 id="L'alignement_vertical">L'alignement vertical</h3> + +<p>La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent <code>display: inline-block</code> ou <code>display: table</code>, la propriété <code>vertical-align</code> était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.</p> + +<h3 id="La_disposition_sur_plusieurs_colonnes">La disposition sur plusieurs colonnes</h3> + +<p>Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés <code>column-*</code> ne s'appliquent pas sur un conteneur de grille.</p> + +<h2 id="Approfondir_la_question">Approfondir la question</h2> + +<ul> + <li>Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">cet excellent article de Hacks</a>.</li> + <li>Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'<em>autoprefixer</em> : <em><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE implementation of CSS Grid Layout?</a></em></li> + <li><a href="https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie">Autoprefixer et le placement automatique des grilles pour IE</a></li> + <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">Les grilles CSS et la nouvelle version d'Autoprefixer</a></li> +</ul> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html new file mode 100644 index 0000000000..cbc0501498 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html @@ -0,0 +1,452 @@ +--- +title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture' +slug: >- + Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.</p> + +<h2 id="Les_propriétés_logiques_les_propriétés_physiques_et_les_valeurs">Les propriétés logiques, les propriétés physiques et les valeurs</h2> + +<p>CSS possède de nombreux mots-clés qui permettent de positionner <strong>physiquement</strong> les éléments : <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.</p> + +<pre class="brush:css">.container { + position: relative; +} +.item { + position: absolute; + top: 20px; + left: 30px; +} +</pre> + +<pre class="brush: html"><div class="container"> + <div class="item">Item</div> +</div> +</pre> + +<p>On rencontre également ces mots-clés physiques avec <code>text-align: right</code> afin d'aligner le texte à droite. Il existe aussi des propriétés <strong>physiques</strong> en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.</p> + +<p>On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.</p> + +<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>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> + +<h3 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h3> + +<p>Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé <code>start</code> lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, <code>start</code> correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, <code>start</code> ne correspond pas à une position physique.</p> + +<h2 id="L'axe_de_bloc_et_l'axe_en_ligne">L'axe de bloc et l'axe en ligne</h2> + +<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> + +<h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2> + +<p>Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (<em>CSS Writing Modes</em>). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article <a href="https://24ways.org/2016/css-writing-modes/"><em>CSS Writing Modes</em> (en anglais)</a> écrit par Jen Simmons.</p> + +<h3 id="writing-mode"><code>writing-mode</code></h3> + +<p>Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété <code>writing-mode</code> nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :</p> + +<ul> + <li><code>horizontal-tb</code></li> + <li><code>vertical-rl</code></li> + <li><code>vertical-lr</code></li> + <li><code>sideways-rl</code></li> + <li><code>sideways-lr</code></li> +</ul> + +<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 { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + margin: 1em; + color: #d9480f; + 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> + <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p> +</div> + +<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> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(2, 100px); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> + <div class="item5">Objet 5</div> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + writing-mode: vertical-lr; + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(2, 100px); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> + <div class="item5">Objet 5</div> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p> +</div> + +<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> + +<h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2> + +<p>Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + writing-mode: vertical-lr; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); + grid-gap: 10px; +} + +.item1 { + grid-column: 1 / 4; + align-self: start; +} + +.item2 { + grid-column: 1 / 3; + grid-row: 2 / 4; + align-self: start; +} + +.item3 { + grid-column: 3; + grid-row: 2 / 4; + align-self: end; + justify-self: end; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p> +</div> + +<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> + +<h2 id="Le_placement_automatique_et_les_modes_d'écriture">Le placement automatique et les modes d'écriture</h2> + +<p>On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.</p> + +<h2 id="Le_placement_sur_les_lignes_et_les_modes_d'écriture">Le placement sur les lignes et les modes d'écriture</h2> + +<p>Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.</p> + +<p>Dans l'exemple suivant, on a une grille avec la direction <code>ltr</code> et on positionne trois objets en utilisant le placement sur les lignes.</p> + +<ul> + <li>L'objet 1 commence à la colonne 1 et occupe une piste</li> + <li>L'objet 2 commence à la colonne -1 et occupe -3 pistes</li> + <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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 100px); + grid-gap: 10px; +} +.item1 { + grid-column: 1 ; +} +.item2 { + grid-column: -1 / -3; +} +.item3 { + grid-column: 1 / 3; + grid-row: 2; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + direction: rtl; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 100px); + grid-gap: 10px; +} +.item1 { + grid-column: 1 ; +} +.item2 { + grid-column: -1 / -3; +} +.item3 { + grid-column: 1 / 3; + grid-row: 2; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p> +</div> + +<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> + +<h3 id="L'étrange_ordre_des_valeurs_pour_grid-area">L'étrange ordre des valeurs pour <code>grid-area</code></h3> + +<p>La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).</p> + +<p>Pour les valeurs de <code>grid-area</code>, l'ordre est le suivant :</p> + +<ul> + <li><code>grid-row-start</code></li> + <li><code>grid-column-start</code></li> + <li><code>grid-row-end</code></li> + <li><code>grid-column-end</code></li> +</ul> + +<p>Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :</p> + +<ul> + <li><code>top</code></li> + <li><code>left</code></li> + <li><code>bottom</code></li> + <li><code>right</code></li> +</ul> + +<p>Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété <code>grid-area</code> comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !</p> + +<h2 id="Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS">Utiliser des modes d'écriture hybrides et les grilles CSS</h2> + +<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; + grid-template-columns: 1fr auto; + font: 1em Helvetica, Arial, sans-serif; +} +.wrapper nav { + writing-mode: vertical-lr; +} +.wrapper ul { + list-style: none; + margin: 0; + padding: 1em; + display: flex; + justify-content: space-between; +} +.wrapper a { + text-decoration: none; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="content"> + <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> + <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p> + </div> + <nav> + <ul> + <li><a href="">Lien 1</a></li> + <li><a href="">Lien 2</a></li> + <li><a href="">Lien 3</a></li> + </ul> + </nav> +</div> +</pre> + +<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p> +</div> + +<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>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> + +<h3 id="Utiliser_les_propriétés_logiques_partout">Utiliser les propriétés logiques partout</h3> + +<p>Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.</p> + +<p>La <a href="https://drafts.csswg.org/css-logical-props/">spécification sur les propriétés logiques en CSS</a> vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">équivalents logiques</a> pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.</p> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html new file mode 100644 index 0000000000..9f31864e55 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html @@ -0,0 +1,588 @@ +--- +title: Le modèle de grille et les autres modèles de disposition +slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition +tags: + - CSS + - CSS Grids + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.</p> + +<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> + +<h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3> + +<p>Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.</p> + +<p>Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (<code>flex-basis</code>) de 150 pixels.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + width: 500px; + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 150px; +} +</pre> +</div> + +<p>{{EmbedLiveSample('onedtwod', '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> + +<p>On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.</p> + +<h3 id="La_même_disposition_avec_une_grille_CSS">La même disposition avec une grille CSS</h3> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}</p> +</div> + +<p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p> + +<ul> + <li>Ai-je uniquement besoin de contrôler la disposition selon des colonnes <strong>ou</strong> selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.</li> + <li>Ai-je besoin de contrôler la disposition selon des colonnes <strong>et</strong> selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.</li> +</ul> + +<h3 id="Organiser_lespace_ou_organiser_le_contenu">Organiser l'espace ou organiser le contenu ?</h3> + +<p>En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.</p> + +<p>En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (<em>tracks</em>) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.</p> + +<p>Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.</p> + +<h3 id="Lalignement_des_boîtes">L'alignement des boîtes</h3> + +<p>Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.</p> + +<p>Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée <em><a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a></em>. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.</p> + +<p>Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{EmbedLiveSample('Box_alignment', '300', '230')}}</p> + +<h3 id="Lalignement_sur_les_grilles_CSS">L'alignement sur les grilles CSS</h3> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +}.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}</p> + +<h3 id="Lunité_fr_et_flex-basis">L'unité <code>fr</code> et <code>flex-basis</code></h3> + +<p>On a vu avant l'unité <code>fr</code> qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité <code>fr</code>, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés <code>flex</code> utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.</p> + +<p>Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode <em>responsive</em> (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.</p> + +<p>En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.</p> + +<h4 id="Des_pistes_qui_se_remplissent_automatiquement">Des pistes qui se remplissent automatiquement</h4> + +<p>On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation <code>repeat</code> et aux propriétés <code>auto-fill</code> et <code>auto-fit</code>.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}</p> + +<h3 id="Avoir_un_nombre_de_pistes_flexible">Avoir un nombre de pistes flexible</h3> + +<p>L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé <code>auto-fill</code> et la fonction {{cssxref("minmax()", "minmax()")}}.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}</p> + +<p>On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.</p> + +<h2 id="Les_grilles_et_les_éléments_positionnés_de_façon_absolue">Les grilles et les éléments positionnés de façon absolue</h2> + +<p>La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.</p> + +<h3 id="Avoir_une_grille_comme_bloc_englobant">Avoir une grille comme bloc englobant</h3> + +<p>Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété <code>position</code> avec la valeur <code>relative</code> (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise <code>position:</code> <code>absolute</code> sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3"> + Ce bloc est positionné de façon absolue. Dans cet exemple + la grille est le bloc englobant et les valeurs de décalage + pour la position sont calculées depuis les bords extérieurs + de la zone dans laquelle a été placé l'élément. + </div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}</p> + +<p>On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés <code>top</code> et <code>left</code>. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.</p> + +<p>Si on retire <code>position:</code> <code>absolute</code> des règles sur <code>.box3</code>, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.</p> + +<h3 id="Utiliser_une_grille_comme_parent">Utiliser une grille comme parent</h3> + +<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>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> + +<h3 id="Utiliser_une_zone_de_grille_comme_parent">Utiliser une zone de grille comme parent</h3> + +<p>Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone <code>.box3</code> de la grille.</p> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois + <div class="abspos"> + Ce bloc est positionné de façon absolue. Dans cet exemple + la zone de la grille est le bloc englobant et le positionnement + est calculé à partir des bords de la zone de la grille. + </div> + </div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}</p> + +<h2 id="Utiliser_une_grille_et_display_contents">Utiliser une grille et <code>display:</code> <code>contents</code></h2> + +<p>Une autre combinaison notable, en termes de disposition, peut être l'utilisation de <code>display:</code> <code>contents</code> avec les grilles CSS. La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la <a href="https://drafts.csswg.org/css-display/#box-generation">spécification Display</a> :</p> + +<blockquote> +<p>L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.</p> +</blockquote> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Deux</div> + <div class="box box3">Trois</div> + <div class="box box4">Quatre</div> + <div class="box box5">Cinq</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p> +</div> + +<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 notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Deux</div> + <div class="box box3">Trois</div> + <div class="box box4">Quatre</div> + <div class="box box5">Cinq</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p> +</div> + +<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> + +<p>Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Guides sur <em>Flexbox</em></a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guides sur la disposition multi-colonnes</a></li> +</ul> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html new file mode 100644 index 0000000000..980b03ea62 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html @@ -0,0 +1,569 @@ +--- +title: Le placement automatique sur une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<p>{{EmbedLiveSample('placement_1', '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> + +<p>Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec <code>grid-template-rows</code>, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.</p> + +<h3 id="Dimensionner_les_lignes_de_la_grille_implicite">Dimensionner les lignes de la grille implicite</h3> + +<p>Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre + <br>Cette cellule + <br>a du contenu + <br>supplémentaire + <br>et max vaut auto + <br>afin que la ligne + <br>se développe. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> + <div>Huit</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p> +</div> + +<h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3> + +<p>On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>column</code>. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.</p> + +<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); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> + <div>Huit</div> +</div> +</pre> + +<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p> +</div> + +<h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2> + +<p>Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">l'algorithme de placement des objets sur la grille</a>, mais voyons ici les quelques règles simples qu'il faut principalement retenir.</p> + +<h3 id="Modification_de_lordre_du_document">Modification de l'ordre du document</h3> + +<p>Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section <em>“order modified document order”</em>. Cela signifie que si on utilise uniquement la propriété <code>order</code>, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.</p> + +<h3 id="Les_éléments_avec_des_propriétés_de_placement">Les éléments avec des propriétés de placement</h3> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> + <div>Huit</div> + <div>Neuf</div> + <div>Dix</div> + <div>Onze</div> + <div>Douze</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; +} +.wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p> +</div> + +<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> + +<p>On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur <code>span 2</code>. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.</p> + +<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;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> + <div>Huit</div> + <div>Neuf</div> + <div>Dix</div> + <div>Onze</div> + <div>Douze</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} +.wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; +} +.wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p> +</div> + +<h3 id="Combler_les_espaces">Combler les espaces</h3> + +<p>En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.</p> + +<p>Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>dense</code>. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec <code>column</code>. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : <code>grid-auto-flow: column dense</code>.</p> + +<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;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> + <div>Huit</div> + <div>Neuf</div> + <div>Dix</div> + <div>Onze</div> + <div>Douze</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} +.wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; +} +.wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p> +</div> + +<h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3> + +<p>Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des <code>div</code> et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.</p> + +<pre class="brush: css"><div class="grid"> + Je suis une chaîne de caractères et je serai placé + automatiquement. + <div>Un élément de la grille</div> + <div>Un élément de la grille</div> +</div> +</pre> + +<p>Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.</p> + +<h3 id="Les_cas_dutilisation_pour_le_placement_automatique">Les cas d'utilisation pour le placement automatique</h3> + +<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)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + <dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; +} +</pre> + +<p>{{EmbedLiveSample('placement_10', '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> + +<p>Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée <code>n</code> » (pour que certaines lignes soient sautées). Cette question <a href="https://github.com/w3c/csswg-drafts/issues/796">est décrite sur le dépôt GitHub du CSSWG</a>, n'hésitez pas à ajouter vos exemples de scénarios.</p> + +<p>Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <em>issues</em> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.</p> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p> diff --git a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html new file mode 100644 index 0000000000..5984342f18 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html @@ -0,0 +1,605 @@ +--- +title: Placer les éléments sur les lignes d'une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p> + +<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> + +<h2 id="Un_exemple_simple">Un exemple simple</h2> + +<p>Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.</p> + +<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> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<p>{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}</p> + +<h2 id="Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne">Positionner les éléments d'une grille grâce au numéro de ligne</h2> + +<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; + grid-row-start: 1; + grid-row-end: 4; +} +</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>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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box2 { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box3 { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; +} +.box4 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; +} +</pre> + +<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 / 2; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 / 4; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 / 3; + grid-row: 1 / 2; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 / 4; +} +</pre> + +<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p> +</div> + +<h3 id="La_taille_par_défaut">La taille par défaut</h3> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 4; +} +.box2 { + grid-column-start: 3; + grid-row-start: 1; + grid-row-end: 3; +} +.box3 { + grid-column-start: 2; + grid-row-start: 1; +} +.box4 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 3; +} +</pre> + +<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p> +</div> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 ; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 ; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 ; + grid-row: 1 ; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 ; +} +</pre> + +<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p> +</div> + +<h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2> + +<p>On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :</p> + +<ul> + <li><code>grid-row-start</code></li> + <li><code>grid-column-start</code></li> + <li><code>grid-row-end</code></li> + <li><code>grid-column-end</code></li> +</ul> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-area: 1 / 1 / 4 / 2; +} +.box2 { + grid-area: 1 / 3 / 3 / 4; +} +.box3 { + grid-area: 1 / 2 / 2 / 3; +} +.box4 { + grid-area: 3 / 2 / 4 / 4; +} +</pre> + +<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> + +<ul> + <li><code>block-start</code></li> + <li><code>block-end</code></li> + <li><code>inline-start</code></li> + <li><code>inline-end</code></li> +</ul> + +<p>On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique <code>block-start</code> est donc la ligne en haut du conteneur, <code>block-end</code> correspond à la ligne en bas du conteneur, <code>inline-start</code> correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et <code>inline-end</code> correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.</p> + +<p>Lorsqu'on définit une zone d'une grille grâce à la propriété <code>grid-area</code>, on commence par définir les lignes de « début » : <code>block-start</code> et <code>inline-start</code> puis les lignes de « fin » avec <code>block-end</code> et <code>inline-end</code>. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.</p> + +<h2 id="Compter_à_rebours">Compter à rebours</h2> + +<p>On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur <code>-1</code> et on peut compter à rebours au fur et à mesure de cette façon (ainsi, <code>-2</code> fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne <em>explicite</em> de la grille, telle qu'elle est définie par <code>grid-template-columns</code> et <code>grid-template-rows</code>. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column-start: -1; + grid-column-end: -2; + grid-row-start: -1; + grid-row-end: -4; +} +.box2 { + grid-column-start: -3; + grid-column-end: -4; + grid-row-start: -1; + grid-row-end: -3; +} +.box3 { + grid-column-start: -2; + grid-column-end: -3; + grid-row-start: -1; + grid-row-end: -2; +} +.box4 { + grid-column-start: -2; + grid-column-end: -4; + grid-row-start: -3; + grid-row-end: -4; +} +</pre> + +<p>{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}</p> + +<h3 id="Étirer_un_élément_sur_la_grille">Étirer un élément sur la grille</h3> + +<p>Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :</p> + +<pre class="brush: css">.item { + grid-column: 1 / -1; +} +</pre> + +<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> + +<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>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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 ; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 ; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 ; + grid-row: 1 ; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 ; +} +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); + grid-column-gap: 20px; + grid-row-gap: 1em; +} +</pre> + +<p>{{EmbedLiveSample('Les_gouttières', '300', '350') }}</p> + +<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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); + grid-gap: 1em 20px; +} +</pre> + +<p>Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.</p> + +<h2 id="Utiliser_le_mot-clé_span">Utiliser le mot-clé <code>span</code></h2> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1; + grid-row: 1 / span 3; +} +.box2 { + grid-column: 3; + grid-row: 1 / span 2; +} +.box3 { + grid-column: 2; + grid-row: 1; +} +.box4 { + grid-column: 2 / span 2; + grid-row: 3; +} +</pre> + +<p>{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}</p> + +<p>Le mot-clé <code>span</code> peut également être utilisé dans les valeurs des propriétés <code>grid-row-start</code>/<code>grid-row-end</code> et <code>grid-column-start</code>/<code>grid-column-end</code>. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: span 3; +} +</pre> + +<p>Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec <code>span 3</code>. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-row-start: span 3; + grid-row-end: 4; +} +</pre> + +<p>Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.</p> + +<p>Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence de la grille CSS dans Firefox</a> pour analyser une grille compliquée.</p> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</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 new file mode 100644 index 0000000000..10eee83ae2 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/subgrid/index.html @@ -0,0 +1,118 @@ +--- +title: Subgrid +slug: Web/CSS/CSS_Grid_Layout/Subgrid +tags: + - CSS + - Guide + - grid + - subgrid +translation_of: Web/CSS/CSS_Grid_Layout/Subgrid +--- +<p>{{CSSRef}}</p> + +<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> + +<h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2> + +<p>Lorsqu'on ajoute <code>display: grid</code> à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.</p> + +<p>On peut imbriquer des grilles en utilisant <code>display: grid</code> sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.</p> + +<p>Si on utilise la valeur <code>subgrid</code> pour <code>grid-template-columns</code> et/ou <code>grid-template-rows</code>, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.</p> + +<p>Ainsi, si on utilise <code>grid-template-columns: subgrid</code> et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (<em>gaps</em>) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.</p> + +<h2 id="Les_sous-grilles_pour_les_colonnes">Les sous-grilles pour les colonnes</h2> + +<p>Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de <code>1fr</code> chacune et avec quatre lignes qui mesurent au moins <code>100px</code>.</p> + +<p>On place un objet <code>.item</code> entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet <code>.subitem</code> sur cette deuxième grille.</p> + +<p>Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p> + +<p>On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.</p> + +<h2 id="Les_sous-grilles_pour_les_lignes">Les sous-grilles pour les lignes</h2> + +<p>Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois <code>subgrid</code> pour la propriété <code>grid-template-rows</code> et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p> + +<h2 id="Les_sous-grilles_sur_deux_dimensions">Les sous-grilles sur deux dimensions</h2> + +<p>Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p> + +<h3 id="Absence_de_grille_implicite_pour_une_sous-grille">Absence de grille implicite pour une sous-grille</h3> + +<p>S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.</p> + +<p>Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p> + +<p>Si on retire la valeur sur <code>grid-template-rows</code>, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p> + +<h2 id="Utilisation_des_gouttières_et_des_sous-grilles">Utilisation des gouttières et des sous-grilles</h2> + +<p>Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés <code>gap-*</code> sur le conteneur de grille de la sous-grille.</p> + +<p>Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété <code>row-gap</code> à <code>0</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p> + +<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> + +<h2 id="Les_lignes_nommées">Les lignes nommées</h2> + +<p>Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées <code>col-start</code> et <code>col-end</code> sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p> + +<p>Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé <code>subgrid</code>. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p> + +<p>Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p> + +<h2 id="Utilisation_des_sous-grilles">Utilisation des sous-grilles</h2> + +<p>Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.</p> + +<p>Une telle ressemblance entre <code>subgrid</code> et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer <code>subgrid</code> pour la propriété <code>grid-template-rows</code> (et éventuellement fournir une valeur à <code>grid-auto-rows</code> afin de contrôler le dimensionnement implicite).</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <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> + </tr> + </tbody> +</table> + +<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> +</ul> diff --git a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html new file mode 100644 index 0000000000..d8d7e5cf83 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html @@ -0,0 +1,431 @@ +--- +title: Utiliser des lignes nommées sur une grille +slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +<div>{{CSSRef}}</div> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p> + +<p>Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.</p> + +<h2 id="Nommer_des_lignes_lorsqu'on_définit_une_grille">Nommer des lignes lorsqu'on définit une grille</h2> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + 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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +</pre> + +<p>Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.</p> + +<pre class="brush: css">.box1 { + grid-column-start: main-start; + grid-row-start: main-start; + grid-row-end: main-end; +} +.box2 { + grid-column-start: content-end; + grid-row-start: main-start; + grid-row-end: content-end; +} +.box3 { + grid-column-start: content-start; + grid-row-start: main-start; +} +.box4 { + grid-column-start: content-start; + grid-column-end: main-end; + grid-row-start: content-end; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> +</div> +</pre> + +<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p> +</div> + +<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> + +<h3 id="Donner_plusieurs_noms_à_une_ligne">Donner plusieurs noms à une ligne</h3> + +<p>On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : <code>[sidebar-end main-start]</code>. On peut ensuite désigner la ligne par l'un de ces noms.</p> + +<h2 id="Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées">Définir des zones de grilles implicites à l'aide de lignes nommées</h2> + +<p>Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un <a href="https://drafts.csswg.org/css-values-4/#custom-idents">identifiant personnalisé (ou <em>custom ident</em>)</a>, c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser <code>span</code>). Les identifiants ne sont pas mis entre quotes.</p> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + 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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +.thing { + grid-area: content; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="thing"> + Je suis dans une zone nommée content. + </div> +</div> +</pre> + +<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p> +</div> + +<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> + +<h2 id="Définir_des_lignes_implicites_à_l'aide_de_zones_nommées">Définir des lignes implicites à l'aide de zones nommées</h2> + +<p>Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.</p> + +<p>Dans cet exemple, on ajoute un élément <code>div</code> supplémentaire et on lui ajoute la classe <code>overlay</code>. On déclare des zones nommées à l'aide de <code>grid-area</code> puis on indique la disposition via la propriété <code>grid-template-areas</code>. Les noms utilisés pour les zones sont :</p> + +<ul> + <li><code>hd</code></li> + <li><code>ft</code></li> + <li><code>main</code></li> + <li><code>sd</code></li> +</ul> + +<p>Cela crée implicitement les lignes et colonnes suivantes :</p> + +<ul> + <li><code>hd-start</code></li> + <li><code>hd-end</code></li> + <li><code>sd-start</code></li> + <li><code>sd-end</code></li> + <li><code>main-start</code></li> + <li><code>main-end</code></li> + <li><code>ft-start</code></li> + <li><code>ft-end</code></li> +</ul> + +<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>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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} +.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +.wrapper > div.overlay { + z-index: 10; + grid-column: main-start / main-end; + grid-row: hd-start / ft-end; + border: 4px solid rgb(92,148,13); + background-color: rgba(92,148,13,.4); + color: rgb(92,148,13); + font-size: 150%; +} +</pre> + +<pre class="brush: html"><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 class="overlay">Masque</div> +</div> +</pre> + +<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p> +</div> + +<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> + +<h2 id="Utiliser_plusieurs_lignes_avec_le_même_nom_repeat()">Utiliser plusieurs lignes avec le même nom : <code>repeat()</code></h2> + +<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> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); +}</pre> + +<p>Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom <code>col-start</code> et si on place un objet après la ligne <code>col-start</code>, la grille utilisera la première ligne intitulée <code>col-start</code> (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / col-start 5 +} +</pre> + +<p>On peut également utiliser le mot-clé <code>span</code>. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :</p> + +<pre class="brush: css">.item2 { + grid-column: col-start 7 / span 3; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Je vais de col-start 1 à col-start 5</div> + <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>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>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> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); +} +</pre> + +<p>Si on utilise <code>repeat()</code> et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est <code>1fr</code>, chacune avec un début et une fin.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); +} +</pre> + +<p>Si on écrivait la même définition sans utiliser <code>repeat()</code>, on aurait la forme suivante :</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; +} +</pre> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr); +} +.item1 { + grid-column: col1-start / col2-start 2 +} +.item2 { + grid-row: 2; + grid-column: col1-start 2 / span 2 col1-start; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div> + <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div> +</div> +</pre> + +<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p> +</div> + +<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; + grid-template-columns: repeat(12, [col-start] 1fr); +} +</pre> + +<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;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > * { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-header">Je suis l'en-tête</header> + <aside class="side1">Je suis la barre latérale 1</aside> + <article class="content">Je suis l'article</article> + <aside class="side2">Je suis la barre latérale 2</aside> + <footer class="main-footer">Je suis le pied de page</footer> +</div> +</pre> + +<p>Pour placer ces éléments, on utilise la grille de la façon suivante :</p> + +<pre class="brush: css">.main-header, +.main-footer { + grid-column: col-start / span 12; +} +.side1 { + grid-column: col-start / span 3; + grid-row: 2; +} +.content { + grid-column: col-start 4 / span 6; + grid-row: 2; +} +.side2 { + grid-column: col-start 10 / span 3; + grid-row: 2; +} +</pre> + +<p>{{EmbedLiveSample('three_column', '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>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> + +<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p> |