Layout Multi Colonna in CSS

Il layout a più colonne in CSS consente di definire facilmente più colonne di testo, proprio come nei giornali:

Proprietà Layout Multi Colonna

Ecco la lista delle proprietà per il layout multi colonna:

La proprietà column-count specifica il numero di colonne in cui un elemento dovrebbe essere diviso.

L’esempio seguente dividerà il testo nell’elemento <div> in 3 colonne:

div {
  column-count: 3;
}

La proprietà column-gap specifica lo spazio tra le colonne.

L’esempio seguente specifica uno spazio di 40 pixel tra le colonne:

div {
  column-gap: 40px;
}

La proprietà column-rule-style specifica lo stile della linea tra le colonne:

div {
  column-rule-style: solid;
}

La proprietà column-rule-width specifica la larghezza della linea tra le colonne:

div {
  column-rule-width: 1px;
}

La proprietà column-rule-color specifica il colore della linea tra le colonne:

div {
  column-rule-color: salmon;
}

La proprietà column-rule è una proprietà abbreviata per impostare tutte le proprietà column-rule-* sopra elencate.

L’esempio seguente imposta la larghezza, lo stile e il colore della linea tra le colonne:

div {
  column-rule: 10px solid red;
}

La proprietà column-span specifica quante colonne un elemento dovrebbe occupare.

L’esempio seguente specifica che l’elemento <h2> dovrebbe occupare tutte le colonne:

h2 {
  column-span: all;
}

La proprietà column-width specifica una larghezza suggerita e ottimale per le colonne.

L’esempio seguente specifica che la larghezza suggerita e ottimale per le colonne dovrebbe essere di 100px:

div {
  column-width: 100px;
}