CODEWITHSUNDEEP
htmlcssformslayoutcheckbox
h3ader
h3ader

Reputation: 145

Arrange multiple checkboxes like a grid. Without tables?

I'm currently working on a big formular with a lot of checkboxes. Is there a way to display them like a grid, e.g. 4 columns?

I know you can do this with tables but I don't really want to use them to style things if it is not really necessary. So is there a way with CSS?

Example:
[]text []text []text []text
[]text []text []text []text
...

Upvotes: 12

Views: 55454

Answers (6)

Axel
Axel

Reputation: 10772

Here is a solution, with complete checkbox markup and CSS, and a working example.

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.checkbox-grid li {
  flex: 0 0 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>

Upvotes: 43

gmo
gmo

Reputation: 9000

Try with "float:left;display:table-cell" and pseudo class ":nth-child" and "float:none"

check this out: http://jsfiddle.net/7gdgQ/1/ (is commented)

And good luck!

Upvotes: 3

cimmanon
cimmanon

Reputation: 68319

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.

Upvotes: 4

Michael
Michael

Reputation: 7092

You can certainly use div's and such to do so, don't be afraid of tables though. They do have pertinent applications and you should use them if what your trying to do warrants using them.

Here is a div based css solution: http://jsfiddle.net/XugFX/

HTML

<div class="row">
    <div class="col"><input type="checkbox" /><label>Box 1</label></div>
    <div class="col"><input type="checkbox" /><label>Box 2</label></div>
    <div class="col"><input type="checkbox" /><label>Box 3</label></div>
    <div class="col"><input type="checkbox" /><label>Box 4</label></div>
</div>
<div class="row">
    <div class="col"><input type="checkbox" /><label>Box 5</label></div>
    <div class="col"><input type="checkbox" /><label>Box 6</label></div>
    <div class="col"><input type="checkbox" /><label>Box 7</label></div>
    <div class="col"><input type="checkbox" /><label>Box 8</label></div>
</div>

CSS

.row {
    border: 1px solid red;
    overflow: hidden;
    padding: 5px;
}

.col {
    border: 1px solid blue;
    float: left;
    padding: 5px;
    margin-right: 5px;
}

Upvotes: 1

Harshit Tailor
Harshit Tailor

Reputation: 3281

Try ul li

<div>
<ul class="chk">
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>

<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>
<li>checkbox</li>

</ul>
</div>


.chk 
{
  width:100%;
}
.chk li
{
   display:inline-block;
   width:25%;
}

Upvotes: 3

Eric Goncalves
Eric Goncalves

Reputation: 5353

You can float the checkboxes and give each a width of 25% of the parent container.

Upvotes: 0

Related Questions