diff options
Diffstat (limited to 'files/fr/web/css/grid-template-columns/index.md')
| -rw-r--r-- | files/fr/web/css/grid-template-columns/index.md | 147 |
1 files changed, 70 insertions, 77 deletions
diff --git a/files/fr/web/css/grid-template-columns/index.md b/files/fr/web/css/grid-template-columns/index.md index 6900f77183..a49dea50f8 100644 --- a/files/fr/web/css/grid-template-columns/index.md +++ b/files/fr/web/css/grid-template-columns/index.md @@ -7,18 +7,19 @@ tags: - Reference translation_of: Web/CSS/grid-template-columns --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>grid-template-columns</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les colonnes de la grille.</p> +La propriété **`grid-template-columns`** définit les noms des lignes et les fonctions de taille (_track sizing_) pour les colonnes de la grille. -<div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div> +{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */ +```css +/* Valeur avec un mot-clé */ grid-template-columns: none; -/* Valeurs <track-list> */ +/* Valeurs <track-list> */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; @@ -26,7 +27,7 @@ grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); -/* Valeurs <auto-track-list> */ +/* Valeurs <auto-track-list> */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; @@ -40,45 +41,49 @@ grid-template-columns: [linename1 linename2] 100px grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>none</code></dt> - <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.</dd> - <dt><code><length></code></dt> - <dd>Un longueur positive. Voir {{cssxref("<length>")}}.</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif (type {{cssxref("<percentage>")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd> - <dt><code><flex></code></dt> - <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code><flex></code> occupera une partie de l'espace restant en fonction de ce facteur. - <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, <flex>)</code>). Voir {{cssxref("<flex>")}}.</p> - </dd> - <dt><code>max-content</code></dt> - <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt><code>min-content</code></dt> - <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd> - <dt>{{cssxref("minmax()","minmax(min, max)")}}</dt> - <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code><flex></code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd> - <dt><code>auto</code></dt> - <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div> - </dd> - <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> - <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd> - <dt>{{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}</dt> - <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +### Valeurs + +- `none` + - : Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}. +- `<length>` + - : Un longueur positive. Voir {{cssxref("<length>")}}. +- `<percentage>` + - : Un pourcentage positif (type {{cssxref("<percentage>")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme `auto`. +- `<flex>` + + - : Une dimension positive dont l'unité `fr` indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec `<flex>` occupera une partie de l'espace restant en fonction de ce facteur. + + Lorsque cette valeur apparaît en dehors de la notation `minmax()`, la valeur minimale `auto` est implicite (la valeur signifie `minmax(auto, <flex>)`). Voir {{cssxref("<flex>")}}. + +- `max-content` + - : Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille. +- `min-content` + - : Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille. +- {{cssxref("minmax()","minmax(min, max)")}} + - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum. +- `auto` + + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + + > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. + +- {{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}} + - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée comme pour `auto` (i.e. `minmax(auto, max-content)`) sauf que la taille de la piste est ramenée à _argument_ si elle est plus grande que le minimum fourni par `auto`. +- {{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}} + - : Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush:css">#grid { +```css +#grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; @@ -90,50 +95,38 @@ grid-template-columns: unset; #areaB { background-color: yellow; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div id="grid"> - <div id="areaA">A</div> - <div id="areaB">B</div> -</div></pre> +```html +<div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples", "100%", "20px")}}</p> +{{EmbedLiveSample("Exemples", "100%", "20px")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.grid-template-columns")}}</p> +{{Compat("css.properties.grid-template-columns")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid-template-areas")}}</li> - <li>{{cssxref("grid-template")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li> - <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li> -</ul> +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-template")}} +- [Guide : les concepts de base pour les grilles CSS : les pistes](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes) +- Tutoriel vidéo : [définir une grille (en anglais)](https://gridbyexample.com/video/series-define-a-grid/) |