CSS grid-column-end
La proprietà CSS3 grid-column-end definisce dove termina l’elemento nella griglia orizzontale
La proprietà grid-column-end specifica la linea di griglia orizzontale in cui un elemento termina. Può essere usata con numeri di linea, parole chiave come auto, o la funzione span. È utile per controllare l’estensione orizzontale di un elemento in una griglia CSS3.
Sintassi
Significato dei valori principali:
auto: L'elemento termina nella colonna successiva disponibile (valore predefinito).
<line>: Numero di linea della griglia dove termina l'elemento (es.
4).span n: L'elemento occupa
ncolonne a partire dalla linea di inizio (es.span 2).<custom-ident>: Nome di una linea di griglia dichiarata con
grid-template-columns.
Esempio proprietà: grid-column-end
Codice Esempio: grid-column-end
.grid-column-end-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #eee;
padding: 10px;
}.grid-item {
background-color: #4078f2;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}.end-example {
grid-column-start: 1;
grid-column-end: 3;
background-color: #a626a4;
}
Contenuto Esempio: grid-column-end
Esempio di utilizzo di grid-column-end
In questo esempio, l’elemento inizia alla colonna 1 e termina alla linea 3:
CSS e HTML per specificare il termine della colonna:
<style>
.grid-column-end-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-item {
background-color: #4078f2;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
.end-example {
grid-column-start: 1;
grid-column-end: 3;
background-color: #a626a4;
}
</style>
<div class="grid-column-end-container">
<div class="grid-item end-example">Elemento esteso</div>
<div class="grid-item">2</div>
<div class="grid-item">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
