CSS grid-area
La proprietà CSS3 grid-area posiziona un elemento nella griglia
La proprietà grid-area consente di posizionare un elemento in modo preciso all’interno di un layout a griglia. Si tratta di una shorthand che combina le quattro proprietà: grid-row-start, grid-column-start, grid-row-end e grid-column-end. Introdotta in CSS3, è particolarmente utile per layout complessi e reattivi.
Sintassi
Significato dei valori principali:
-
row-start: La linea della griglia da cui inizia la riga dell’elemento.
-
column-start: La linea della griglia da cui inizia la colonna dell’elemento.
-
row-end: La linea della griglia dove termina la riga dell’elemento.
-
column-end: La linea della griglia dove termina la colonna dell’elemento.
Esempio proprietà: grid-area
Codice Esempio: grid-area
.grid-container-area {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: #f3f3f3;
padding: 10px;
}.grid-item-area {
background-color: #ff6347;
color: white;
font-size: 20px;
text-align: center;
border-radius: 8px;
padding: 20px;
}.special {
grid-area: 2 / 2 / 4 / 4; /* Riga 2-4, Colonna 2-4 */
background-color: #50a14f;
}
Contenuto Esempio: grid-area
Esempio di utilizzo di grid-area
In questo esempio, posizioniamo un elemento in modo specifico nella griglia usando grid-area:
CSS e HTML per l’elemento posizionato nella griglia:
<style>
.grid-container-area {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-item-area {
background-color: #ff6347;
color: white;
font-size: 20px;
text-align: center;
border-radius: 8px;
padding: 20px;
}
.special {
grid-area: 2 / 2 / 4 / 4; /* Riga 2-4, Colonna 2-4 */
background-color: #50a14f;
}
</style>
<div class="grid-container-area">
<div class="grid-item-area">1</div>
<div class="grid-item-area">2</div>
<div class="grid-item-area special">Elemento posizionato</div>
<div class="grid-item-area">4</div>
<div class="grid-item-area">5</div>
<div class="grid-item-area">6</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
