Search code examples
htmlcssformslayoutcheckbox

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


Solution

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