CSS grid-template
La proprietà CSS3 grid-template definisce righe, colonne e aree della griglia
La proprietà grid-template è una scorciatoia potente che permette di configurare l'intera struttura di una griglia CSS. Si possono definire le righe (grid-template-rows), le colonne (grid-template-columns) e le aree della griglia (grid-template-areas) in un'unica dichiarazione, facilitando la lettura e la gestione del layout.
Sintassi
Significato dei valori principali:
-
grid-template-rows: definisce l'altezza delle righe della griglia, ad esempio
100px 1fr 2fr. -
grid-template-columns: definisce la larghezza delle colonne, ad esempio
200px auto. -
grid-template-areas (opzionale): consente di nominare e organizzare aree della griglia con nomi simbolici.
Esempio proprietà: grid-template
Codice Esempio: grid-template
.grid-template-example {
display: grid;
grid-template:
"header header" 60px
"sidebar content" 1fr"footer footer" 40px / 150px 1fr;
gap: 10px;
height: 300px;
}.grid-template-example > div {
background-color: #50a14f;
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
Esempio di utilizzo di grid-template
In questo esempio, la proprietà grid-template viene usata per definire righe, colonne e aree della griglia.
CSS e HTML per la griglia con grid-template:
<style>
.grid-template-example {
display: grid;
grid-template:
"header header" 60px
"sidebar content" 1fr
"footer footer" 40px / 150px 1fr;
gap: 10px;
height: 300px;
}
.grid-template-example > div {
background-color: #50a14f;
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-template-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
