Conteggio colonne automatico CSS quando viene fissata la massima altezza

Question

Desidero ottenere un layout in cui un elemento (nel mio caso uno <ul>) si espande a 2 (o più) colonne quando l'altezza raggiunge un certo limite.

Quindi, ad esempio, se l'altezza è sufficiente per 3 articoli e io ne ho 5, il 4 ° e il 5 ° elemento vanno alla seconda colonna, che viene creata solo se necessario.

Ho provato a farlo impostando la max-height come suggerito here con column-count e column-width insieme al auto tramite il columns (I provato a installare separatamente anche stesso comportamento).

Se invece cambio lo column-count in un numero intero fisso, funziona e bilancia gli articoli, ma questo non è dinamico come ho bisogno. (Se ho solo 2 elementi non voglio creare 2 colonne per loro).

C'è un modo per fissare l'altezza e le colonne vengono aggiunte automaticamente quando l'altezza non è sufficiente per adattarsi a tutti gli articoli?

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    max-height: 200px; 
 
    
 
    columns: auto auto; 
 
    -webkit-columns: auto auto; 
 
    -moz-columns: auto auto; 
 
    
 
    /** This works, but fixes the columns to 2, which is not what I want. 
 
    columns: 2 auto; 
 
    -webkit-columns: 2 auto; 
 
    -moz-columns: 2 auto; 
 
    */ 
 
    
 
    column-gap: 10px; 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-gap: 10px; 
 
    
 
    column-rule: 1px solid black; 
 
    -webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
    <li>Item #1</li> 
 
    <li>Item #2</li> 
 
    <li>Item #3</li> 
 
    <li>Item #4</li> 
 
    <li>Item #5</li> 
 
    <li>Item #6</li> 
 
    <li>Item #7</li> 
 
    <li>Item #8</li> 
 
    <li>Item #9</li> 
 
    <li>Item #10</li> 
 
    <li>Item #11</li> 
 
    <li>Item #12</li> 
 
    </ul> 
 
</div>

Answer 1

Prima di tutto, per rendere colonne CSS lavoro che dovete impostare column-width o column-count. Le colonne CSS non funzioneranno se non ne imposti nessuna.

Se ho capito bene, è necessario utilizzare la proprietà column-fill. Sfortunatamente, solo Firefox lo supporta ora. Dai un'occhiata a questo code snippet (solo per Firefox).

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    max-height: 200px; 
 

 
    /* Works only in Firefox! */ 
 
    -moz-columns: 100px auto; 
 
    -moz-column-gap: 10px; 
 
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
    -moz-column-fill: auto; 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
     <li>Item #1</li> 
 
     <li>Item #2</li> 
 
     <li>Item #3</li> 
 
     <li>Item #4</li> 
 
     <li>Item #5</li> 
 
     <li>Item #6</li> 
 
     <li>Item #7</li> 
 
     <li>Item #8</li> 
 
     <li>Item #9</li> 
 
     <li>Item #10</li> 
 
     <li>Item #11</li> 
 
     <li>Item #12</li> 
 
    </ul> 
 
</div>

credo, si potrebbe usare flex nel tuo caso. Vedere example:

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    height: 200px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: column wrap; 
 
    flex-flow: column wrap; 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
     <li>Item #1</li> 
 
     <li>Item #2</li> 
 
     <li>Item #3</li> 
 
     <li>Item #4</li> 
 
     <li>Item #5</li> 
 
     <li>Item #6</li> 
 
     <li>Item #7</li> 
 
     <li>Item #8</li> 
 
     <li>Item #9</li> 
 
     <li>Item #10</li> 
 
     <li>Item #11</li> 
 
     <li>Item #12</li> 
 
    </ul> 
 
</div>