CSS grid-template-areas
La proprietà CSS3 grid-template-areas definisce aree leggibili per la griglia
La proprietà grid-template-areas migliora la leggibilità dei layout a griglia, permettendo di assegnare nomi simbolici a porzioni della griglia. Questi nomi vengono poi riferiti negli elementi tramite grid-area, rendendo il codice più chiaro e organizzato, simile a una rappresentazione visiva della struttura del layout.
Sintassi
Significato dei valori principali:
-
"area-name": una stringa che rappresenta una riga della griglia. Ogni parola rappresenta una cella della griglia, e parole ripetute definiscono celle unite (come il
colspanin HTML). -
"." un punto indica una cella vuota, cioè non assegnata a nessuna area nominata.
-
Coerenza: tutte le righe devono avere lo stesso numero di aree (celle), altrimenti il layout genererà un errore.
Esempio proprietà: grid-template-areas
Codice Esempio: grid-template-areas
.grid-areas-example {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header""sidebar content""footer footer";
gap: 10px;
height: 300px;
}.grid-areas-example > div {
background-color: #4078f2;
color: white;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
Contenuto Esempio: grid-template-areas
Esempio di utilizzo di grid-template-areas
In questo esempio, la proprietà grid-template-areas viene utilizzata per definire una griglia leggibile con aree assegnate.
CSS e HTML per la griglia con grid-template-areas:
<style>
.grid-areas-example {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 10px;
}
.grid-areas-example > div {
background-color: #4078f2;
color: white;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
</style>
<div class="grid-areas-example">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</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
