CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS column-fill

La proprietà CSS column-fill (CSS3): controlla il riempimento del contenuto nelle colonne

La proprietà column-fill determina come il contenuto viene distribuito tra più colonne. Con balance, il contenuto viene suddiviso in modo uniforme, mentre con auto, viene inserito in una colonna per volta. Questa proprietà è utile quando si lavora con contenitori di altezza fissa.

Sintassi

column-fill: balance | auto;

Significato dei valori principali:

  • balance: (predefinito) Cerca di distribuire il contenuto in modo uniforme tra tutte le colonne disponibili.

  • auto: Riempe le colonne una alla volta, lasciando le successive vuote se non c'è abbastanza contenuto.


Nota: la proprietà column-fill ha effetto solo su contenitori con altezza esplicitamente definita.


Esempio proprietà: column-fill


Codice Esempio: column-fill

CODE: CSSpreleva codice
  1. .column-fill-container {
  2.   height: 200px;
  3.   column-count: 3;
  4.   column-gap: 20px;
  5.   background-color: #fdfdfd;
  6.   padding: 15px;
  7.   font-size: 15px;
  8.   line-height: 1.5;
  9.   margin-bottom: 30px;
  10.   border-radius: 8px;
  11. }
  12.  
  13. .balance {
  14.   column-fill: balance;
  15. }
  16.  
  17. .auto {
  18.   column-fill: auto;
  19. }

Contenuto Esempio: column-fill

Esempio di utilizzo di column-fill

Confronto tra column-fill: balance e column-fill: auto su contenitori con altezza fissa.


column-fill: balance;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dapibus leo. Aenean hendrerit nisl at bibendum dignissim. Donec ut felis sit amet turpis pretium tincidunt. Suspendisse potenti.
column-fill: auto;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dapibus leo. Aenean hendrerit nisl at bibendum dignissim. Donec ut felis sit amet turpis pretium tincidunt. Suspendisse potenti.

CSS e HTML per l'esempio con column-fill:

  
  <style>
    .column-fill-container {
      height: 200px;
      column-count: 3;
      column-gap: 20px;
      background-color: #fdfdfd;
      padding: 15px;
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 30px;
      border-radius: 8px;
    }

    .balance {
      column-fill: balance;
    }

    .auto {
      column-fill: auto;
    }
  </style>

  <div class="column-fill-container balance">
    <strong>column-fill: balance;</strong>
    Lorem ipsum dolor sit amet...
  </div>

  <div class="column-fill-container auto">
    <strong>column-fill: auto;</strong>
    Lorem ipsum dolor sit amet...
  </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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies