CSS grid
La proprietà CSS3 grid definisce righe e colonne di un layout griglia
La proprietà grid permette di creare griglie complesse specificando righe e colonne in una sola dichiarazione. È una shorthand che può includere grid-template-rows, grid-template-columns, grid-template-areas e altre. È disponibile a partire da CSS3.
Sintassi
Significato dei valori principali:
-
none: Disattiva il layout grid e ripristina il comportamento predefinito del contenitore.
-
<grid-template-rows>: Specifica l’altezza delle righe della griglia (es.
100px 1fr). -
<grid-template-columns>: Specifica la larghezza delle colonne della griglia (es.
200px 2fr). -
<grid-template-areas>: (opzionale) definisce aree della griglia con nomi personalizzati per un layout più semantico.
Esempio proprietà: grid
Codice Esempio: grid
.grid-container {
display: grid;
grid: 100px 100px / 1fr 2fr 1fr;
gap: 10px;
background-color: #e0e0e0;
padding: 10px;
}.grid-item {
background-color: #50a14f;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
border-radius: 8px;
}
Contenuto Esempio: grid
Esempio di utilizzo di grid
In questo esempio, utilizziamo la proprietà grid per creare una semplice griglia a 2 righe e 3 colonne:
CSS e HTML per la griglia:
<style>
.grid-container {
display: grid;
grid: 100px 100px / 1fr 2fr 1fr;
gap: 10px;
background-color: #e0e0e0;
padding: 10px;
}
.grid-item {
background-color: #50a14f;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
border-radius: 8px;
}
</style>
<div class="grid-container">
<div class="grid-item">1</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 class="grid-item">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
