CSS grid-row-start
La proprietà CSS3 grid-row-start definisce la linea di inizio riga di un elemento
La proprietà grid-row-start specifica la linea verticale di griglia da cui un elemento deve partire. Può essere un numero, un nome personalizzato di linea, oppure auto per posizionamento automatico. Fa parte di CSS3 e permette di controllare la posizione verticale precisa nella griglia.
Sintassi
Significato dei valori principali:
auto: Il posizionamento verticale è automatico (default).
<line>: Numero della linea di griglia dove l’elemento deve iniziare (es.
2).<custom-ident>: Nome personalizzato di una linea di griglia, definito tramite
grid-template-rows.
Esempio proprietà: grid-row-start
Codice Esempio: grid-row-start
.grid-row-start-container {
display: grid;
grid-template-rows: repeat(4, 70px);
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background-color: #e0f7fa;
padding: 10px;
}.grid-item {
background-color: #00796b;
color: white;
font-size: 18px;
text-align: center;
padding: 18px;
border-radius: 6px;
}.start-example {
grid-row-start: 2;
background-color: #c2185b;
}
Contenuto Esempio: grid-row-start
Esempio di utilizzo di grid-row-start
In questo esempio, l’elemento inizia alla riga 2:
CSS e HTML per posizionare un elemento a partire da una riga specifica:
<style>
.grid-row-start-container {
display: grid;
grid-template-rows: repeat(4, 70px);
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background-color: #fff;
padding: 10px;
}
.grid-item {
background-color: #00796b;
color: white;
font-size: 18px;
text-align: center;
padding: 18px;
border-radius: 6px;
}
.start-example {
grid-row-start: 2; /* Inizia dalla riga 2 */
background-color: #c2185b;
}
</style>
<div class="grid-row-start-container">
<div class="grid-item start-example">Inizio riga 2</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
