grid-auto-columns CSS propriété

Définition de la CSS grid-auto-columns.

La propriété de Grid CSS grid-auto-columns permet de spécifier la taille par défaut de chaque colonne de la grille Css dont la taille n'est pas explicitement définie avec grid-template-columns au sein de leur conteneur Grid Css.

grid-auto-columns : 1fr;
grid-auto-columns : 150px;
grid-auto-columns : max-content;
grid-auto-columns : min-content; 
grid-auto-columns : minmax(100px, 500px);
grid-auto-columns : fit-content(100px);
grid-auto-columns : 10px 1fr 50%;

La propriété de feuille de style grid-auto-columns CSS peut prendre une/des valeurs de taille :

• auto : utilise tout l'espace possible pour cette colonne, équivaut à minmax(auto, auto). valeur par défaut.
• numérique positif suivi d'une unité de longueur CSS (px ou ex ou em, etc.).
• numérique positif suivi de % (pourcentage). La valeur est calculée en fonction de la valeur calculée de sa propriété CSS width.
• numérique positif suivi de fr (unité de facteur de flexibilité). Chaque colonne occupera une partie de l'espace restant en fonction de ce facteur.
• max-content : applique la longueur la plus grande des éléments formant la colonne.
• min-content : applique la longueur la plus petite des éléments formant la colonne.
• minmax(min, max) : min définit la taille minimale et max définit la taille maximale de la colonne.
  Si max est inférieur à min, il est ignoré et sa valeur vaudra alors celle de min.
  - max et min sont des numériques positifs suivi d'une unité de longueur CSS (px ou ex ou em ou % ou fr, etc.) ou [min|max]-content.
• fit-content( taille ) : représente la formule min(max-content, max(auto, taille )) qui est calculée comme pour auto (minmax(auto, max-content)). Si taille est plus grande que le minimum fourni par auto alors cette dernière est appliquée.
  - taille est un numérique positif suivi d'une unité de longueur CSS (px ou ex ou em ou %, etc.)

Exemple de code grid-auto-columns CSS

Conditions d'application de la CSS grid-auto-columns.

La propriété de feuille de style grid-auto-columns CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont un conteneur Grid Css type display:[inline-]grid.

La valeur de la CSS grid-auto-columns peut être mise directement dans la propriété de raccourci CSS grid.

Héritage des valeurs Css de grid-auto-columns.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style grid-auto-columns.

Problème d'interprétation de grid-auto-columns en Css.

Attention à ce jour (05-2019), la déclaration multiple de taille pour la propriété Css grid-auto-columns n'est pas reconnue par FireFox.

Conditions d'animation de grid-auto-columns en CSS3.

La CSS grid-auto-columns est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.