Propriété CSS grid-column

La propriété grid-column définit la taille et l'emplacement des éléments de grille dans une mise en page de grille. Il s'agit d'un raccourci pour les propriétés suivantes :

Valeur initiale	auto auto
S'applique à	Éléments de grille.
Héritée	Non.
Animable	Oui. Les éléments sont animables.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridColumn = "1/ span 3";

Syntaxe

Syntaxe de la propriété CSS grid-column

css

grid-column: <start-line> / <end-line> | <start-line> / span <end-line> | <global>;

Remarque : <global> représente les mots-clés CSS globaux tels que initial, inherit, unset et revert. Ils s'appliquent à la valeur entière de la propriété, et non pas simplement comme alternatives aux numéros de ligne.

Les lignes de grille sont numérotées à partir de 1 au début de la grille. Vous pouvez également utiliser des nombres négatifs pour compter à partir de la fin (par exemple, -1 fait référence à la dernière ligne).

Exemple de la propriété grid-column :

Exemple de la propriété CSS grid-column avec des numéros de ligne

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .box6 {
        grid-column: 2 / 4;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-column Property

Exemple de la propriété grid-column spécifiée comme 1 / 3 :

Exemple de la propriété CSS grid-column

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column: 1 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
`<line-number>`	Spécifie le numéro de ligne pour le bord de début ou de fin.
`<line-name>`	Spécifie le nom de ligne pour le bord de début ou de fin.
`span <number>`	Spécifie le nombre de colonnes que l'élément doit couvrir.
`initial`	Définit la propriété sur sa valeur par défaut.
`inherit`	Hérite la propriété de son élément parent.

Pratique

Quelle est la fonctionnalité de la propriété 'grid-column' en CSS ?

Elle est utilisée pour ajuster la marge intérieure des cellules de grille.Elle est utilisée pour aligner le contenu horizontalement à l'intérieur d'une cellule de grille.Elle est utilisée pour déterminer l'emplacement d'un élément de grille et la portée au sein des voies horizontales de la grille.Elle est utilisée pour définir la largeur des cellules de grille.Elle est utilisée pour spécifier une ligne, une portée ou rien.

Propriété CSS grid-column ​

Syntaxe ​

Exemple de la propriété grid-column : ​

Résultat ​

Exemple de la propriété grid-column spécifiée comme 1 / 3 : ​

Valeurs ​