diff options
Diffstat (limited to 'files/fr/web/css/grid-auto-columns/index.md')
| -rw-r--r-- | files/fr/web/css/grid-auto-columns/index.md | 168 |
1 files changed, 80 insertions, 88 deletions
diff --git a/files/fr/web/css/grid-auto-columns/index.md b/files/fr/web/css/grid-auto-columns/index.md index a993203277..2456688ecb 100644 --- a/files/fr/web/css/grid-auto-columns/index.md +++ b/files/fr/web/css/grid-auto-columns/index.md @@ -8,33 +8,34 @@ tags: - Reference translation_of: Web/CSS/grid-auto-columns --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>grid-auto-columns</code></strong> définit la taille d'une colonne de grille créée de façon implicite.</p> +La propriété **`grid-auto-columns`** définit la taille d'une colonne de grille créée de façon implicite. -<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div> +{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}} -<p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p> +Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* Valeurs de longueur */ -/* Type <length> */ +/* Type <length> */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* Valeurs proportionnelles */ -/* Type <percentage> */ +/* Type <percentage> */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; -/* Valeurs <flex> */ +/* Valeurs <flex> */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; @@ -60,41 +61,44 @@ grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><length></code></dt> - <dd>Une longueur positive (cf. type {{cssxref("<length>")}}.</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considéré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>).</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><code>minmax(min, max)</code></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. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd> - <dt><code>fit-content(argument)</code></dt> - <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</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> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +### Valeurs + +- `<length>` + - : Une longueur positive (cf. type {{cssxref("<length>")}}. +- `<percentage>` + - : Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considéré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>)`). + +- `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 +- `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. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal). +- `fit-content(argument)` + - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée de façon semblable à `auto`, sauf qu'ici, la taille de la piste est écrétée à _argument_ s'i elle est plus grande que le minimum `auto`. +- `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")}}. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">#grid { +```css +#grid { width: 100px; display: grid; grid-template-areas: "a a"; @@ -102,53 +106,41 @@ grid-auto-columns: unset; grid-auto-columns: 200px; } -#grid > div { +#grid > div { background-color: lime; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> -</div></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", "410px", "100px")}}</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("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.grid-auto-columns")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("grid-auto-rows")}}</li> - <li>{{cssxref("grid-auto-flow")}}</li> - <li>{{cssxref("grid")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li> - <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li> -</ul> +} +``` + +### HTML + +```html +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` + +### Résultat + +{{EmbedLiveSample("Exemples", "410px", "100px")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.grid-auto-columns")}} + +## Voir aussi + +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-flow")}} +- {{cssxref("grid")}} +- [Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite](/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite) +- Tutoriel vidéo : [Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)](https://gridbyexample.com/video/series-auto-placement-order/) |