Proprietà CSS grid-row-start

La proprietà CSS grid-row-start imposta su quale linea di riga della griglia inizia un elemento della griglia. In altre parole, specifica la linea di inizio del blocco (il bordo superiore in un layout orizzontale da sinistra a destra) dell'area della griglia dell'elemento. È possibile fornire un numero di linea, una linea con nome o la parola chiave span che fa estendere l'elemento su più righe.

Questa proprietà ha effetto solo sugli elementi della griglia — figli diretti di un elemento il cui display è grid o inline-grid. Su qualsiasi altro elemento viene ignorata. È la forma estesa per il lato iniziale della proprietà abbreviata grid-row, e si abbina a grid-row-end per definire l'intera estensione verticale. Per il posizionamento orizzontale, consulta la proprietà corrispondente grid-column-start.

Questa pagina tratta la sintassi di grid-row-start, ogni valore accettato, esempi pratici (numeri di linea e span), e le insidie da tenere presenti.

Valore iniziale	auto
Si applica a	Elementi della griglia.
Ereditabile	No.
Animabile	Sì. Il posizionamento degli elementi è animabile.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	object.style.gridRowStart = "5";

Sintassi

Sintassi CSS grid-row-start

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

Nota: <line> è un segnaposto per un numero di linea o un nome di linea personalizzato.

Esempio della proprietà grid-row-start:

Esempio di codice 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>

Provalo tu stesso »

Risultato

Con grid-row-start: auto, il riquadro 3 occupa semplicemente la sua posizione naturale nel flusso della griglia — auto lascia che l'algoritmo di posizionamento automatico della griglia decida dove collocare l'elemento.

Esempio della proprietà grid-row-start, dove il terzo riquadro inizia dalla prima riga:

Esempio CSS grid-row-start prima riga

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

Provalo tu stesso »

Impostando grid-row-start: 1 si ancora il riquadro 3 alla linea di riga 1 della griglia, in modo che inizi dalla riga più in alto indipendentemente dall'ordine nel sorgente.

Esempio della proprietà grid-row-start, dove il quarto riquadro inizia dalla seconda riga:

Esempio CSS grid-row-start seconda riga

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

Provalo tu stesso »

Esempio della proprietà grid-row-start con la parola chiave `span`:

Esempio CSS grid-row-start con 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>

Provalo tu stesso »

Con span 2, il riquadro 3 si estende su due righe a partire dalla sua linea di inizio naturale, spostando gli elementi successivi nelle celle disponibili successive. Usa span quando ti interessa quante righe deve occupare un elemento piuttosto che quale linea esatta deve essere la sua linea di inizio.

Esempio dei valori `initial` e `inherit`:

Esempio 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 */
}

Nota: initial viene tipicamente usato per reimpostare la proprietà al suo comportamento predefinito, mentre inherit è utile quando un elemento figlio della griglia deve corrispondere al comportamento di posizionamento del suo genitore.

Valori

Valore	Descrizione	Provalo
auto	Si estende su una riga. Il posizionamento esatto dipende dalle regole di posizionamento automatico della griglia. Questo è il valore predefinito di questa proprietà.	Provalo »
`<line>`	Specifica un numero o nome di linea da cui l'elemento deve iniziare.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dal suo elemento genitore.

Nota: Quando combinato con grid-row-end, assicurarsi che la linea di inizio preceda la linea di fine per evitare sovrapposizioni o collassi degli elementi della griglia.

Suggerimenti e insidie comuni

I numeri di linea negativi contano dalla fine. grid-row-start: -1 fa riferimento all'ultima linea di riga, utile per ancorare un elemento in fondo a una griglia di dimensioni esplicite.
auto non è uguale a 1. auto affida il posizionamento all'algoritmo di posizionamento automatico della griglia, mentre 1 ancora sempre l'elemento alla prima linea di riga.
Gli elementi posizionati esplicitamente possono lasciare spazi vuoti. Ancorare un elemento a una linea specifica può spostare altri elementi e creare celle vuote, a seconda di grid-auto-flow.
Imposta la linea di fine corrispondente per chiarezza. Quando controlli l'inizio con grid-row-start, impostare anche grid-row-end (o usare la proprietà abbreviata grid-row) rende l'estensione dell'elemento esplicita e più facile da mantenere.

Supporto dei browser

grid-row-start fa parte di CSS Grid Layout ed è supportato in tutti i browser moderni — Chrome, Firefox, Safari e Edge.

Proprietà correlate

grid-row — proprietà abbreviata per grid-row-start e grid-row-end.
grid-row-end — imposta la linea di fine (block-end) dell'elemento.
grid-column-start — la controparte orizzontale di questa proprietà.
grid-template-rows — definisce le righe (e le linee con nome) a cui fa riferimento grid-row-start.

Esercitazione

Pratica

Cosa specifica la proprietà grid-row-start in CSS?

Specifica il numero di linea da cui iniziare un elemento della grigliaSpecifica il numero di riga da cui deve iniziare una grigliaSegna l'inizio di una CSS gridSpecifica il colore della riga iniziale in una grigliaSpecifica il nome della linea della griglia da cui l'elemento inizierà

Sintassi

Esempio della proprietà grid-row-start:

Risultato

Esempio della proprietà grid-row-start, dove il terzo riquadro inizia dalla prima riga:

Esempio della proprietà grid-row-start, dove il quarto riquadro inizia dalla seconda riga:

Esempio della proprietà grid-row-start con la parola chiave span:

Esempio dei valori initial e inherit:

Valori

Suggerimenti e insidie comuni

Supporto dei browser

Proprietà correlate

Esercitazione

Esempio della proprietà grid-row-start con la parola chiave `span`:

Esempio dei valori `initial` e `inherit`: