CSS grid-row
La proprietà CSS3 grid-row controlla la posizione verticale di un elemento
La proprietà grid-row è una shorthand che combina grid-row-start e grid-row-end. Viene usata per definire su quali righe un elemento deve iniziare e terminare nella griglia verticale. Introdotta con CSS3, è essenziale per layout avanzati con CSS Grid.
Sintassi
grid-row: start / end;
Significato dei valori principali:
start: La linea di griglia da cui parte l’elemento lungo l’asse verticale.
end: La linea di griglia dove termina l’elemento (può essere un numero,
span n, oauto).
Esempio proprietà: grid-row
Codice Esempio: grid-row
CODE: CSS
.grid-row-container {
display: grid;
grid-template-rows: repeat(4, 80px);
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}.grid-item {
background-color: #ca1243;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}.tall {
grid-row: 1 / 3;
background-color: #0184bc;
}
Contenuto Esempio: grid-row
Esempio di utilizzo di grid-row
In questo esempio, l’elemento occupa dalla riga 1 alla riga 3, quindi due righe:
Elemento alto
2
3
4
5
CSS e HTML per posizionare un elemento su più righe:
<style>
.grid-row-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: #ca1243;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
.tall {
grid-row: 1 / 3;
background-color: #0184bc;
}
</style>
<div class="grid-row-container">
<div class="grid-item tall">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
