CSS grid-auto-columns
La proprietà CSS3 grid-auto-columns definisce la larghezza delle colonne implicite
La proprietà grid-auto-columns consente di specificare la larghezza delle colonne che non sono state definite esplicitamente tramite grid-template-columns. È utile quando la griglia genera colonne automaticamente per ospitare contenuti posizionati oltre i limiti dichiarati.
Sintassi
Significato dei valori principali:
-
length: Valore fisso in pixel o altre unità (es.
100px). -
percentage: Percentuale rispetto al contenitore grid (es.
25%). -
auto: La dimensione della colonna dipende dal contenuto.
-
max-content: Adatta la colonna al contenuto più largo.
-
min-content: Adatta la colonna al contenuto minimo.
-
fit-content(): Limita la dimensione al contenuto ma con un massimo specificato (es.
fit-content(200px)).
Esempio proprietà: grid-auto-columns
Codice Esempio: grid-auto-columns
.grid-auto-columns-container {
display: grid;
grid-template-rows: 100px;
grid-auto-flow: column;
grid-auto-columns: 150px;
gap: 10px;
background-color: #f9f9f9;
padding: 10px;
}.auto-col-item {
background-color: #4078f2;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
Contenuto Esempio: grid-auto-columns
Esempio di utilizzo di grid-auto-columns
In questo esempio, viene utilizzata grid-auto-columns per assegnare una larghezza alle colonne implicite:
CSS e HTML per colonne implicite:
<style>
.grid-auto-columns-container {
display: grid;
grid-template-rows: 100px;
grid-auto-flow: column;
grid-auto-columns: 150px;
gap: 10px;
background-color: #fff;
padding: 10px;
}
.auto-col-item {
background-color: #4078f2;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
</style>
<div class="grid-auto-columns-container">
<div class="auto-col-item">Colonna 1</div>
<div class="auto-col-item">Colonna 2</div>
<div class="auto-col-item">Colonna 3</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
