CODEWITHSUNDEEP
css
Johnyb
Johnyb

Reputation: 1316

Creating grid of checkboxes

I want to create a grid of checkboxes , 

<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>

But to checkboxes to be under each other, (e.g 5 checkboxes under each other and then new column)

in this example

text1   text6
text2   text7
text3   text8
text4    ...
text5

i have tried something like this but these are not under each others but next to each other , is something like that possible?

Upvotes: 1

Views: 735

Answers (2)

julianstark999
julianstark999

Reputation: 3616

The is a simple CSS trick to solve your Problem. CSS Columns

So you can simply add

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

To your css and remove .checkbox-grid li

Upvotes: 2

Jakob
Jakob

Reputation: 3546

Set this in CSS

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

Upvotes: 3

Related Questions