CSS grid-column-start
La proprietà CSS3 grid-column-start imposta la linea iniziale della colonna
La proprietà grid-column-start specifica da quale linea della griglia orizzontale deve iniziare un elemento. Può essere un numero, un nome di linea personalizzato o la parola chiave auto. Utilizzata insieme a grid-column-end, consente un posizionamento preciso nella griglia CSS3.
Sintassi
Significato dei valori principali:
auto: L'elemento viene posizionato automaticamente (valore predefinito).
<line>: Numero di linea della griglia da cui iniziare (es.
2).<custom-ident>: Nome di una linea personalizzata definita con
grid-template-columns.
Esempio proprietà: grid-column-start
Codice Esempio: grid-column-start
.grid-column-start-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f8f8f8;
padding: 10px;
}.grid-item {
background-color: #e06c75;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}.start-example {
grid-column-start: 3;
grid-column-end: 5;
background-color: #61afef;
}
Contenuto Esempio: grid-column-start
Esempio di utilizzo di grid-column-start
In questo esempio, l’elemento comincia dalla linea 3 della griglia orizzontale:
CSS e HTML per posizionare un elemento a partire da una linea specifica:
<style>
.grid-column-start-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-item {
background-color: #e06c75;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
.start-example {
grid-column-start: 3;
grid-column-end: 5;
background-color: #61afef;
}
</style>
<div class="grid-column-start-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item start-example">Inizia da linea 3</div>
<div class="grid-item">4</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
