Propriété CSS grid-row-end

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 initiale	auto
S'applique à	Éléments de grille.
Héritée	Non.
Animable	Oui.
Version	Module de mise en page en grille CSS Niveau 1
Syntaxe DOM	object.style.gridRowEnd = "4";

Syntaxe

Syntaxe CSS de grid-row-end

css

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

html

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

Try it Yourself »

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

html

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

Try it Yourself »

Valeurs

Valeur	Description	Tester
auto	Une seule ligne sera étendue. Il s'agit de la valeur par défaut de cette propriété.	Tester »
span n	Spécifie le nombre de lignes à étendre.	Tester »
grid-line	Spécifie la ligne de grille où l'élément se termine.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hé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

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

Elle définit la ligne où le côté de fin d'un élément de grille s'arrête horizontalement.Elle définit la ligne où le côté de fin d'un élément de grille s'arrête verticalement.Elle aligne les éléments au sein de la grille verticalement.Elle contrôle l'espace entre deux lignes dans la grille.

Propriété CSS grid-row-end ​

Syntaxe ​

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

Résultat ​

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

Valeurs ​