Столбцы CSS не работают с Firefox

Question

Я создаю веб-страницу со стилем Pinterest, однако свойство столбцов не работает в Firefox.

This is the example that I am following, вы можете попробовать его в Firefox.

Это отношение CSS:

#columns { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    column-count: 3; 
    column-gap: 15px; 
    column-fill: auto; 
} 

Любые предложения?

Answer 1

Я не знаю почему еще, но Firefox не нравится -moz-column-fill: auto, удалите его, и пример отлично работает. Начальное значение для column-fill является balance (read more on column-fill здесь)

body > div { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 10px; 
 
    /*-moz-column-fill: auto;*/ 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 10px; 
 
    -webkit-column-fill: auto; 
 
    column-count: 3; 
 
    column-gap: 15px; 
 
    column-fill: auto; 
 
} 
 
body > div > div { 
 
    background: #F00; 
 
    height: 400px; 
 
} 
 
body > div > div:nth-child(2n) { 
 
    background: #FF0; 
 
}

<div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>