Utiliser la propriété grid-column-end pour définir la colonne de fin d'un élément de grille

La propriété CSS grid-column-end

La propriété CSS grid-column-end définit la colonne de grille de fin d'un élément de grille. Elle peut être utilisée pour spécifier l'emplacement de fin d'un élément de grille dans la grille à l'aide de coordonnées de ligne et de colonne.

Syntaxe CSS

Voici la syntaxe de la propriété CSS grid-column-end :

grid-column-end: <line-number> | <name> | span <number> | span <name> | auto | -1;

<line-number> représente le numéro de la colonne de fin. Par exemple, 3 signifie la troisième colonne de la grille.

<name> représente le nom de la colonne de fin. Ce nom doit avoir été défini dans la propriété grid-template-columns ou grid-template-rows. Par exemple, col-3 signifie la colonne nommée col-3.

span <number> indique que l'élément de grille doit s'étendre sur plusieurs colonnes. Le nombre spécifié détermine le nombre de colonnes à couvrir. Par exemple, span 2 signifie que l'élément de grille doit s'étendre sur deux colonnes.

span <name> fonctionne de la même manière que span <number>, mais le nom de la colonne de fin doit être spécifié au lieu d'un numéro de colonne.

auto signifie que la colonne de fin de l'élément de grille sera déterminée automatiquement en fonction de sa taille et de l'emplacement de départ de l'élément de grille.

-1 signifie que l'élément de grille doit s'étendre jusqu'à la dernière colonne de la grille.

Exemple d'utilisation

Voici un exemple d'utilisation de la propriété grid-column-end dans un style CSS :

    .item {
      grid-column-end: 3;
    }
  

Dans cet exemple, l'élément .item se terminera à la troisième colonne de la grille. Si l'élément commence à la première colonne, il occupera les colonnes 1 à 3. Si l'élément commence à la deuxième colonne, il occupera les colonnes 2 à 3.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Utilisation de la propriété CSS grid-column-end

Voici comment utiliser la propriété grid-column-end dans un style CSS :

    .item {
      grid-column-end: 3;
    }
  

Dans cet exemple, l'élément .item se terminera à la troisième colonne de la grille. Si l'élément commence à la première colonne, il occupera les colonnes 1 à 3. Si l'élément commence à la deuxième colonne, il occupera les colonnes 2 à 3.

Vous pouvez également utiliser des expressions pour définir la colonne de fin d'un élément de grille. Par exemple, pour définir la colonne de fin de l'élément sur la dernière colonne de la grille, vous pouvez utiliser l'expression -1 :

    .item {
      grid-column-end: -1;
    }
  

Il est également possible de définir la colonne de fin d'un élément de grille en utilisant des noms de lignes ou de colonnes définis avec les propriétés grid-template-rows et grid-template-columns. Par exemple :

    .grid {
      grid-template-columns: [col-1] 50px [col-2] 50px [col-3] 50px [col-4];
      grid-template-rows: [row-1] 50px [row-2] 50px [row-3] 50px [row-4];
    }

    .item {
      grid-column-end: col-3;
    }
  

Dans cet exemple, l'élément .item se terminera à la colonne nommée col-3, c'est-à-dire la troisième colonne de la grille.

Il est important de noter que la propriété grid-column-end doit être utilisée conjointement avec la propriété grid-column-start pour définir l'emplacement complet d'un élément de grille dans la grille. Si seule la propriété grid-column-end est utilisée, l'élément de grille occupera toutes les colonnes de la grille jusqu'à la colonne de fin spécifiée.

Astuces et conseils pour utiliser la propriété CSS grid-column-end

Voici quelques astuces et conseils pour utiliser la propriété CSS grid-column-end :

1. Assurez-vous de définir la colonne de départ de l'élément de grille avec la propriété grid-column-start. Si seule la propriété grid-column-end est utilisée, l'élément de grille occupera toutes les colonnes de la grille jusqu'à la colonne de fin spécifiée.
2. Utilisez l'expression -1 pour définir la colonne de fin de l'élément de grille sur la dernière colonne de la grille. Cela peut être utile si vous avez une grille à plusieurs colonnes et que vous voulez que certains éléments s'étendent sur toutes les colonnes.
3. Utilisez des noms de lignes et de colonnes pour rendre votre code plus lisible et facile à maintenir. Vous pouvez définir des noms de lignes et de colonnes dans les propriétés grid-template-rows et grid-template-columns.
4. N'oubliez pas que la propriété grid-column-end s'applique uniquement aux éléments de grille et non aux éléments enfants de ces éléments. Si vous voulez que les éléments enfants de l'élément de grille s'étendent sur plusieurs colonnes, vous devez utiliser la propriété grid-column pour leur définir un emplacement complet dans la grille.

Exemple d'utilisation de la propriété grid-column-end avec du code HTML et CSS :

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        .grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);
        }

        .item {
          grid-column-start: 2;
          grid-column-end: -1;
        }
      </style>
    </head>
    <body>

    <h1>La propriété CSS grid-column-end</h1>
    <div class="grid">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
    </body>
    </html>
  

Dans cet exemple, la grille a trois colonnes et trois lignes, et chaque élément .item commence à la deuxième colonne et s'étend jusqu'à la dernière colonne. Le résultat final sera une grille avec des éléments qui occupent les colonnes 2 à 3 de chaque ligne.