Создание сетки флажков

Question

Я хочу создать сетку флажков,

<ul class="checkbox-grid"> 
    <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></li> 
    <li><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></li> 
    <li><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></li> 
    <li><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></li> 
    <li><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></li> 
    <li><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></li> 
    <li><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></li> 
    <li><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></li> 
</ul> 

Но флажков друг под другом (например, 5 флажков друг под другом, а затем новый столбец)

в этом пример

text1 text6 
text2 text7 
text3 text8 
text4 ... 
text5 

я попробовал что-то вроде this, но это не под друг друга, но рядом друг с другом, что-то подобное возможно?

Answer 1

Установить это в CSS

.checkbox-grid { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
} 

Answer 2

The простой CSS трюк, чтобы решить вашу проблему. CSS Columns

Таким образом, вы можете просто добавить

.checkbox-grid { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
} 

К вашему CSS и удалить .checkbox-grid li