CSS grid-row-end
La proprietà CSS3 grid-row-end definisce la linea finale della riga per un elemento
La proprietà grid-row-end specifica dove termina verticalmente un elemento nella griglia CSS. È utile per determinare quante righe deve occupare un elemento e può essere usata con grid-row-start per un controllo completo.
Sintassi
Significato dei valori principali:
auto: L'elemento termina automaticamente alla riga successiva disponibile (valore predefinito).
<line>: Specifica la linea finale di griglia (es.
4).span n: Estende l’elemento su
nrighe a partire dalla riga di inizio (es.span 2).<custom-ident>: Riferimento a una linea personalizzata definita con
grid-template-rows.
Esempio proprietà: grid-row-end
Codice Esempio: grid-row-end
.grid-row-end-container {
display: grid;
grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #fdf6e3;
padding: 10px;
}.grid-item {
background-color: #b58900;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}.end-example {
grid-row-start: 1;
grid-row-end: 4;
background-color: #268bd2;
}
Contenuto Esempio: grid-row-end
Esempio di utilizzo di grid-row-end
In questo esempio, l’elemento inizia dalla riga 1 e termina alla riga 4:
CSS e HTML per terminare un elemento a una riga specifica:
<style>
.grid-row-end-container {
display: grid;
grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-item {
background-color: #b58900;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
.end-example {
grid-row-start: 1;
grid-row-end: 4; /* L’elemento occupa righe 1, 2 e 3 */
background-color: #268bd2;
}
</style>
<div class="grid-row-end-container">
<div class="grid-item end-example">Elemento alto</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
