Propriété CSS grid-auto-columns

La propriété grid-auto-columns définit la taille des colonnes de grille créées implicitement — c'est-à-dire les colonnes que le navigateur génère automatiquement lorsque des éléments de grille sont placés en dehors des colonnes que vous avez explicitement définies avec grid-template-columns.

Pourquoi c'est important : Lorsque vous créez une grille, vous déclarez généralement un nombre fixe de pistes. Mais si un élément se retrouve dans une colonne qui n'existe pas encore (par exemple, vous placez un élément à grid-column: 5 dans une grille à 3 colonnes), CSS Grid crée cette colonne supplémentaire à la volée. Par défaut, ces colonnes générées automatiquement ont une taille auto, ce qui les réduit souvent pour s'adapter au contenu. grid-auto-columns vous permet de contrôler la largeur qu'elles doivent avoir.

Remarque : Cette propriété n'affecte que les colonnes créées implicitement, et non celles définies explicitement. Pour dimensionner les colonnes que vous déclarez à l'avance, utilisez plutôt grid-template-columns. L'équivalent pour les lignes est grid-auto-rows.

Quand des colonnes implicites sont-elles créées ?

Les colonnes implicites apparaissent dans deux situations courantes :

Un élément est positionné au-delà de la dernière ligne de colonne explicite (ex. grid-column-start: 4 alors que seulement 3 colonnes sont définies).
La grille utilise grid-auto-flow: column, de sorte que les nouveaux éléments s'écoulent dans des colonnes fraîchement créées plutôt que dans des lignes.

Dans les deux cas, les nouvelles colonnes héritent de leur largeur depuis grid-auto-columns.

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

Syntaxe

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

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

<!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>

Essayez vous-même »

Résultat

Dans l'exemple suivant, la propriété grid-auto-columns est utilisée pour définir une taille par défaut (largeur) 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

<!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>

Essayez vous-même »

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.

Vous pouvez également passer une liste de tailles séparées par des espaces (par exemple grid-auto-columns: 100px 200px). La liste se répète dans l'ordre pour chaque nouvelle colonne implicite.

Propriétés associées

grid-auto-rows — le même principe pour les lignes créées implicitement.
grid-auto-flow — contrôle si les éléments placés automatiquement créent de nouvelles lignes ou colonnes.
grid-template-columns — définit les colonnes explicites.
grid — le raccourci qui regroupe les propriétés de mise en page de grille.

Exercice

Pratique

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 grilleElle fonctionne conjointement avec 'grid-template-areas' et 'grid-auto-flow' pour référencer les colonnes de grille.