Arrange multiple checkboxes like a grid. Without tables?
Here is a solution, with complete checkbox markup and CSS, and a working example.
.checkbox-grid li {
display: block;
float: left;
width: 25%;
}
<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>
The columns property is a fine choice for this task, since you can make it responsive very easily.
http://jsfiddle.net/FmV9k/1/ (prefixes not included)
.checkboxes {
columns: 4 8em;
}
<ul class="checkboxes">
<li><label><input type="checkbox" name="text1" value="value1" />Text 1</label></li>
<li><label><input type="checkbox" name="text2" value="value2" />Text 2</label></li>
<li><label><input type="checkbox" name="text3" value="value3" />Text 3</label></li>
<li><label><input type="checkbox" name="text4" value="value4" />Text 4</label></li>
<li><label><input type="checkbox" name="text5" value="value5" />Text 5</label></li>
<li><label><input type="checkbox" name="text6" value="value6" />Text 6</label></li>
<li><label><input type="checkbox" name="text7" value="value7" />Text 7</label></li>
<li><label><input type="checkbox" name="text8" value="value8" />Text 8</label></li>
</ul>
We've specified 4 columns, but they must be a minimum of 8em wide. If there's not enough room for all 4 columns, then it will remove columns as necessary to ensure the minumum width is met.