diff options
Diffstat (limited to 'files/fr/web/css/grid-template/index.html')
| -rw-r--r-- | files/fr/web/css/grid-template/index.html | 16 |
1 files changed, 7 insertions, 9 deletions
diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html index 35e1f80d53..55dceb4931 100644 --- a/files/fr/web/css/grid-template/index.html +++ b/files/fr/web/css/grid-template/index.html @@ -9,12 +9,10 @@ translation_of: Web/CSS/grid-template --- <div>{{CSSRef}}</div> -<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> +<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p> <div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -52,11 +50,11 @@ grid-template: unset; <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd> <dt><code>[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?</code></dt> <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon). - <p class="note"><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p> + <div class="note"><p><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p></div> </dd> </dl> -<p class="note"><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p> +<div class="note"><p><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p></div> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> @@ -66,7 +64,7 @@ grid-template: unset; <h3 id="CSS">CSS</h3> -<pre class="brush:css; highlight[5-8]">#page { +<pre class="brush:css">#page { display: grid; width: 100%; height: 200px; @@ -140,7 +138,7 @@ footer { <li>{{cssxref("grid-template-rows")}}</li> <li>{{cssxref("grid-template-areas")}}</li> <li>{{cssxref("grid-template-columns")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li> - <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li> + <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li> </ul> |