Sintassi

Significato dei valori principali:

• lunghezza (px, em, rem, ecc.): La distanza specifica tra una colonna e l’altra. Es. column-gap: 20px.

• normal: Il valore predefinito. Il browser decide automaticamente la distanza (solitamente tra 1em e 2em).

Esempio proprietà: column-gap

Codice Esempio: column-gap

CODE: CSS

1. .column-gap-example {

2.   column-count: 3;

3.   column-rule: 1px solid #ccc;

4.   background-color: #fdfdfd;

5.   padding: 15px;

6.   font-size: 15px;

7.   line-height: 1.6;

8.   border-radius: 8px;

9.   margin-bottom: 30px;

10. }

12. .gap-10 {

13.   column-gap: 10px;

14. }

16. .gap-40 {

17.   column-gap: 40px;

18. }

Contenuto Esempio: column-gap

  
  <style>
    .column-gap-example {
      column-count: 3;
      column-rule: 1px solid #ccc;
      background-color: #fdfdfd;
      padding: 15px;
      font-size: 15px;
      line-height: 1.6;
      border-radius: 8px;
      margin-bottom: 30px;
    }

    .gap-10 {
      column-gap: 10px;
    }

    .gap-40 {
      column-gap: 40px;
    }
  </style>

  <div class="column-gap-example gap-10">
    <strong>column-gap: 10px</strong>
    Lorem ipsum...
  </div>

  <div class="column-gap-example gap-40">
    <strong>column-gap: 40px</strong>
    Lorem ipsum...
  </div>
  

Nota Bene:
La proprietà column-gap è ancora in uso, ma è ora inclusa nella proprietà abbreviata gap nei layout moderni.

In passato, la proprietà per gestire lo spazio tra le colonne in un layout grid era column-gap e questa era la forma specifica da usare per definire la distanza tra le colonne.

Tuttavia, con le versioni moderne di CSS, è stato introdotto un miglioramento che permette di utilizzare la proprietà gap anche in flexbox e grid, creando una forma abbreviata che funziona sia per le righe che per le colonne contemporaneamente.

Compatibilità retroattiva:
Anche se la proprietà abbreviata gap è diventata standard, la proprietà column-gap è ancora supportata dai browser moderni per compatibilità. Quindi, sia column-gap che gap sono funzionali, ma l'uso di gap è preferito per la sua semplicità e versatilità.

In sintesi:

• gap: È una proprietà generale che applica lo spazio tra righe e colonne (in un grid layout) o tra gli oggetti in un flex container.
• column-gap: È specifica per i gap orizzontali, ossia tra le colonne in un grid layout

Uso di entrambi in un grid, ad esempio

CODE: CSS

1. .container {

2.   display: grid;

3.   gap: 10px; /* distanza tra righe e colonne */

4.   column-gap: 20px; /* distanza solo tra le colonne */

5. }

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