CSS grid-column
La proprietà CSS3 grid-column controlla la posizione orizzontale di un elemento
La proprietà grid-column consente di posizionare un elemento in una o più colonne della griglia specificandone le linee di inizio e fine. È una shorthand per grid-column-start e grid-column-end, introdotta con CSS3.
Sintassi
grid-column: start / end;
Significato dei valori principali:
start: La linea di inizio della colonna in cui posizionare l’elemento (numero, nome, o
auto).end: La linea di fine della colonna in cui l’elemento termina (numero, nome,
span n, oauto).
Esempio proprietà: grid-column
Codice Esempio: grid-column
CODE: CSS
.grid-column-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}.grid-item {
background-color: #c18401;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}.wide {
grid-column: 2 / 4; /* Dalla linea 2 alla linea 4 */
background-color: #50a14f;
}
Contenuto Esempio: grid-column
Esempio di utilizzo di grid-column
In questo esempio, l’elemento viene posizionato tra la seconda e la quarta linea di colonna:
1
Elemento largo
3
4
5
CSS e HTML per posizionare un elemento su più colonne:
<style>
.grid-column-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f4f4f4;
padding: 10px;
}
.grid-item {
background-color: #c18401;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
border-radius: 6px;
}
.wide {
grid-column: 2 / 4;
background-color: #50a14f;
}
</style>
<div class="grid-column-container">
<div class="grid-item">1</div>
<div class="grid-item wide">Elemento largo</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</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
