Propriété CSS grid-row-start

La propriété CSS grid-row-start définit sur quelle ligne de rangée commence un élément de grille. En d'autres termes, elle spécifie la ligne de début de bloc (le bord supérieur dans une mise en page horizontale de gauche à droite) de la zone de grille de l'élément. Vous pouvez lui donner un numéro de ligne, une ligne nommée ou le mot-clé span pour que l'élément s'étende sur plusieurs rangées.

Cette propriété ne prend effet que sur les éléments de grille — les enfants directs d'un élément dont le display est grid ou inline-grid. Sur tout autre élément, elle est ignorée. C'est la propriété longue pour le côté de début du raccourci grid-row, et elle se combine avec grid-row-end pour définir l'étendue verticale complète. Pour le positionnement horizontal, voir la propriété correspondante grid-column-start.

Cette page couvre la syntaxe de grid-row-start, chaque valeur acceptée, des exemples concrets (numéros de ligne et span), ainsi que les pièges à éviter.

Valeur initiale	auto
S'applique à	Les éléments de grille.
Héritée	Non.
Animatable	Oui. Le placement des éléments est animatable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridRowStart = "5";

Syntaxe

Syntaxe CSS de grid-row-start

grid-row-start: auto | <line> | span <number> | initial | inherit;

Remarque : <line> est un espace réservé pour un numéro de ligne ou un nom de ligne personnalisé.

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

Exemple de code CSS grid-row-start

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

Essayez vous-même »

Résultat

Avec grid-row-start: auto, la boîte 3 prend simplement sa place naturelle dans le flux de la grille — auto laisse l'algorithme de placement automatique de la grille décider où va l'élément.

Exemple de la propriété grid-row-start, où la troisième boîte commence à partir de la première rangée :

Exemple CSS grid-row-start première rangée

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

Essayez vous-même »

Définir grid-row-start: 1 ancre la boîte 3 à la ligne de rangée 1 de la grille, de sorte qu'elle commence tout en haut quelle que soit son ordre dans le code source.

Exemple de la propriété grid-row-start, où la quatrième boîte commence à partir de la deuxième rangée :

Exemple CSS grid-row-start deuxième rangée

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

Essayez vous-même »

Exemple de la propriété grid-row-start avec le mot-clé `span` :

Exemple CSS grid-row-start avec span

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

Essayez vous-même »

Avec span 2, la boîte 3 s'étend sur deux rangées à partir de sa ligne de début naturelle, repoussant les éléments suivants vers les cellules disponibles. Utilisez span lorsque vous vous souciez du nombre de rangées qu'un élément doit couvrir plutôt que de la ligne exacte sur laquelle il doit commencer.

Exemple des valeurs `initial` et `inherit` :

Exemple CSS grid-row-start initial/inherit

.box-initial {
  grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
  grid-row-start: inherit; /* Inherits the value from the parent grid item */
}

Remarque : initial est généralement utilisé pour réinitialiser la propriété à son comportement par défaut, tandis que inherit est utile lorsqu'un élément de grille enfant doit correspondre au comportement de placement de son parent.

Valeurs

Valeur	Description	Essayer
auto	S'étend sur une rangée. Le placement exact dépend des règles de placement automatique de la grille. C'est la valeur par défaut de cette propriété.	Essayer »
`<line>`	Spécifie un numéro ou un nom de ligne où l'élément doit commencer.	Essayer »
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Remarque : Lorsqu'elle est combinée avec grid-row-end, assurez-vous que la ligne de début est avant la ligne de fin pour éviter le chevauchement ou l'effacement des éléments de grille.

Conseils et pièges courants

Les numéros de ligne négatifs comptent depuis la fin. grid-row-start: -1 désigne la dernière ligne de rangée, ce qui est pratique pour ancrer un élément au bas d'une grille dimensionnée explicitement.
auto n'est pas identique à 1. auto délègue le placement à l'algorithme de placement automatique de la grille, tandis que 1 ancre toujours l'élément à la première ligne de rangée.
Les éléments placés explicitement peuvent créer des espaces vides. Ancrer un élément à une ligne spécifique peut déplacer d'autres éléments et créer des cellules vides, selon la valeur de grid-auto-flow.
Définissez la ligne de fin correspondante pour plus de clarté. Lorsque vous contrôlez le début avec grid-row-start, définir également grid-row-end (ou utiliser le raccourci grid-row) rend l'étendue de l'élément explicite et plus facile à maintenir.

Support des navigateurs

grid-row-start fait partie de CSS Grid Layout et est pris en charge par tous les navigateurs modernes — Chrome, Firefox, Safari et Edge.

Propriétés associées

grid-row — raccourci pour grid-row-start et grid-row-end.
grid-row-end — définit la ligne de fin (block-end) de l'élément.
grid-column-start — l'équivalent horizontal de cette propriété.
grid-template-rows — définit les rangées (et les lignes nommées) auxquelles grid-row-start fait référence.

Pratique

Que spécifie la propriété grid-row-start en CSS ?

Elle spécifie le numéro de ligne où commence un élément de grilleElle spécifie le numéro de rangée où une grille doit commencerElle marque le début d'une CSS GridElle spécifie la couleur de la rangée de début dans une grilleElle spécifie le nom de ligne de la grille où l'élément commencera

Syntaxe

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

Résultat

Exemple de la propriété grid-row-start, où la troisième boîte commence à partir de la première rangée :

Exemple de la propriété grid-row-start, où la quatrième boîte commence à partir de la deuxième rangée :

Exemple de la propriété grid-row-start avec le mot-clé span :

Exemple des valeurs initial et inherit :

Valeurs

Conseils et pièges courants

Support des navigateurs

Propriétés associées

Pratique

Exemple de la propriété grid-row-start avec le mot-clé `span` :

Exemple des valeurs `initial` et `inherit` :