Propriété CSS grid-auto-columns

La propriété grid-auto-columns définit la taille des colonnes dans un conteneur de grille. Remarque : Cette propriété ne concerne que les colonnes créées implicitement, et non celles définies explicitement.

Valeur initiale	auto
S'applique à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. La taille des colonnes est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridAutoColumns = "100px";

Syntaxe

Syntaxe de la propriété CSS grid-auto-columns

css

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Exemple de grid-auto-columns :

Exemple de la propriété CSS grid-auto-columns avec les valeurs auto et length

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-auto-columns Property

Dans l'exemple suivant, la propriété grid-auto-columns est utilisée pour définir une taille (largeur) par défaut pour toutes les colonnes.

Exemple de grid-auto-columns avec toutes les valeurs :

Exemple de la propriété CSS grid-auto-columns avec les valeurs max-content, min-content, auto et length

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
auto	La taille des colonnes est déterminée par le contenu ou l'espace disponible. Il s'agit de la valeur par défaut de la propriété.
max-content	La taille de chaque colonne est déterminée par la plus grande contribution min-content de ses éléments.
min-content	La taille de chaque colonne est déterminée par la plus petite contribution min-content de ses éléments.
minmax(min, max)	La plage de taille est supérieure ou égale à "min" et inférieure ou égale à "max".
length	La taille des colonnes est spécifiée par une valeur de longueur.
%	La taille des colonnes est spécifiée en pourcentages.

Practice

Que fait la propriété 'grid-auto-columns' en CSS ?

Elle est utilisée pour spécifier la taille des colonnes de grille créées implicitement.Elle est utilisée pour changer la couleur des colonnes de grilleElle contrôle la hauteur des lignes de grilleFonctionne conjointement avec 'grid-template-areas' et 'grid-auto-flow' pour faire référence aux colonnes de grille.

Propriété CSS grid-auto-columns ​

Syntaxe ​

Exemple de grid-auto-columns : ​

Résultat ​

Exemple de grid-auto-columns avec toutes les valeurs : ​

Valeurs ​