W3docs
fr
Se connecter

Propriété CSS grid-row-end

The grid-row-end CSS property defines the end row of the item and the number of rows to span. See the values of grid-row-end property with examples.

La propriété grid-row-end est utilisée pour spécifier sur quelle ligne arrêter l'affichage de l'élément ou sur combien de lignes l'élément s'étendra.

Remarque : Définir explicitement width ou height sur les éléments de grille est généralement inutile, car la mise en page en grille gère automatiquement les dimensions.

Valeur initialeauto
S'applique àÉléments de grille.
HéritéeNon.
AnimableOui.
VersionModule de mise en page en grille CSS Niveau 1
Syntaxe DOMobject.style.gridRowEnd = "4";

Syntaxe

Syntaxe CSS de grid-row-end

grid-row-end: auto | grid-line | span n | inherit | initial | unset;

Exemple de la propriété grid-row-end :

Exemple de code CSS pour grid-row-end

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div class="box">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

CSS grid-row-end with multiple items

Ici, nous avons spécifié la propriété grid-row-end sur "auto". Dans l'exemple suivant, trois lignes sont étendues.

Exemple de la propriété grid-row-end spécifiée comme "span 3" :

Exemple CSS de grid-row-end avec plusieurs éléments

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionTester
autoUne seule ligne sera étendue. Il s'agit de la valeur par défaut de cette propriété.Tester »
span nSpécifie le nombre de lignes à étendre.Tester »
grid-lineSpécifie la ligne de grille où l'élément se termine.Tester »
initialFait utiliser à la propriété sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Pour plus de commodité, vous pouvez également utiliser la propriété raccourcie grid-row pour définir à la fois les lignes de début et de fin.

Pratique

Pratique

Que fait la propriété CSS 'grid-row-end' ?