Sintassi

Significato dei valori principali:

• auto: Valore predefinito. Il browser decide quante colonne creare in base ad altri fattori (es. column-width).

• numero intero: Specifica il numero fisso di colonne desiderate (es. 2, 3, 4, ecc.).

Nota: Può essere combinata con column-gap, column-rule e column-width per un layout più preciso.

Esempio proprietà: column-count

Codice Esempio: column-count

CODE: CSS

1. .column-count-example {

2.   column-count: 3;

3.   column-gap: 30px;

4.   column-rule: 2px solid #ccc;

5.   background-color: #fdfdfd;

6.   padding: 20px;

7.   font-size: 16px;

8.   line-height: 1.6;

9.   border-radius: 8px;

10. }

Contenuto Esempio: column-count

  
  <style>
    .column-count-example {
      column-count: 3;
      column-gap: 30px;
      column-rule: 2px solid #ccc;
      background-color: #fdfdfd;
      padding: 20px;
      font-size: 16px;
      line-height: 1.6;
      border-radius: 8px;
    }
  </style>
  
  <div class="column-count-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