I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column.
<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>
In the desired layout:
text1 text6
text2 text7
text3 text8
text4 ...
text5
I have attempted a solution similar to this, but the checkboxes appear next to each other instead of below one another. Is it possible to achieve this layout?