Risorse dal web:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns#related_css_fragmentation_properties
https://www.html.it/pag/19464/layout-multicolonna/
CSS Multi-Column Layout è un modulo di CSS che aggiunge il supporto per i layout a più colonne.
Fonisce un gruppo di proprietà che rendono possibile la dislocazione del contenuto di un box-contenitore su più colonne.
<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</div>
Note: Lo ritroveremo usarto molto spesso sui <div><section>o <article>.
| column-width | suddivide il contenuto di un container in colonne della grandezza indicata* |
| column-count | suddivide il contenuto di un container nel numero di colonne indicato |
| columns | shorthand (column-count + column-width) per impostare numero di colonne e la loro larghezza |
| column-gap | imposta la dimensione dello spazio tra le colonne |
| column-rule | imposta larghezza stile e colore della linea tra le colonne |
| column-fill | controlla il modo in cui il contenuto viene bilanciato quando suddiviso in colonne |
| column-span | consente a un elemento di estendersi su tutte le colonne |
Note: Potrebbe essere necessario ricorrere ai prefissi proprietari-moz-e-webkit-per supportare rispettivamente Firefox e Safari/Chrome.
Le proprietà elencate qui a seguire si applicano al box container degli elementi
La proprietà column-width suddivide lo spazio del container in più colonne sulla base del valore di larghezza specificato per le singole colonne.
Note: potrebbe tornare utile la proprietà box-sizing impostata con valore border-box sia sull'elemento contenitore sia sugli elementi contenuti.
Valori possibili:
| auto | la larghezza della colonna è determinata da altre proprietà CSS come colum-count |
| unità di misura | non accetta valori percentuali |
.container{
width: 200px;
column-width: 100px;
}
La proprietà colum-count suddivide il contenuto di un elemento nel numero di colonne specificato.
Valori possibili
| auto | Il numero di colonne è determinato da altre proprietà CSS come colum-width |
| valore numerico positivo | 1,2,3,4 ecc. |
.container{
width: 100%;
column-count: 4;
}
La proprietà columns è un proprietà di sintassi abbreviata che fonde le due proprietà column-count e column-width.
Note: il primo valore da inserire fa riferimento alla proprietà column-count mentre il secondo alla proprietà column-width. E' possibile impostare "auto" per uno dei due o omettere uno dei due valori.
.container{
width:100%;
columns: 2 100px;
}
.containerdue{
width: 100%;
columns: auto 50px;
}
La proprietà colum-gap imposta la dimensione dello spazio tra le colonne di un elemento contenitore.
Valori possibili:
| normal | simile a auto. Essa rispetta la spaziatura predefinita del browser |
| unità di misura | tutte in questo caso sono inclusi anche i valori percentuali |
.container{
width: 100%;
column-count:4;
column-gap: 10%;
}
La proprietà column-rule, è una proprietà di sintassi abbreviata (simile a border per gli elementi) ed imposta la larghezza, lo stile ed il colore della linea tracciata tra le colonne.
.container{
width: 100%;
column-count: 4;
column-rule: 1px solid red;
}
.container{
width: 100%;
column-count:4;
column-rule-color: red;
column-rule-style: solid;
column-rule-width: 1px;
}
Invece, le proprietà elencate qui a seguire si applicano agli elementi contenuti nel box container
La proprietà column-span consente a un elemento di estendersi su un numero di colonne o su tutte.
Valori possibili:
| none | L'elemento non si estende su più colonne |
| all | L'elemento si estende su tutte le colonne |
| valore numerico | L'elemento si estende sul numero di colonne indicato |
h1{
column-span: all;
}
h2{
column-span: 4;
}
La proprietà column-fill controlla il modo in cui viene bilanciato il contenuto di un elemento quando suddiviso in più colonne.
Valori possibili:
| auto | Le colonne vengono riempite in sequenza con la possibilità che alcune colonne rimangano vuote |
| balance | Il contenuto è equamente diviso tra le colonne solo l'ultimo frammento è bilanciato. |
| balance-all | Il contenuto è equamente diviso tra le colonne tutti i frammenti sono bilanciati. |
h1{
column-fill: auto;
}
h2{
column-fill: balance;
}
h3{
column-fill: balance-all;
}
Note: in questi casi per elementi non identificabili tramite una classe specifica o un id potrebbero tornare utili le pseudo-classi strutturali (es. nth-child(n))
Per queste proprietà consultare documentazione ufficiale Mozilla.