Sintassi

Significato dei valori principali:

• column-width: definisce la larghezza ideale delle colonne (es. 200px). Può anche essere auto.

• column-count: definisce il numero di colonne da creare. Se uno dei due valori è auto, il browser calcola automaticamente quello mancante in base allo spazio disponibile.

Esempio proprietà: columns

Codice Esempio: columns

CODE: CSS

1. .columns-example {

2.   columns: 200px 3;

3.   column-gap: 25px;

4.   padding: 20px;

5.   background-color: #fef6e4;

6.   font-size: 16px;

7.   line-height: 1.6;

8. }

Contenuto Esempio: columns

  
  <style>
    .columns-example {
      columns: 200px 3;
      column-gap: 25px;
      padding: 20px;
      background-color: #fef6e4;
      font-size: 16px;
      line-height: 1.6;
    }
  </style>

  <div class="columns-example">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  </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