Is it feasible to organize checkboxes into columns using CSS?

Question

Is it feasible to organize checkboxes into columns using CSS?

Can checkboxes be reflowed into columns horizontally as the container's height changes dynamically with an unknown number of checkboxes? Here is a visual representation to illustrate the concept:

Height = 180px (20px * 9 checkboxes):

[ ] Checkbox 1
[ ] Checkbox 2
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7
[ ] Checkbox 8
[ ] Checkbox 9

Height = 140px (20px * 7 checkboxes):

[ ] Checkbox 1    [ ] Checkbox 8
[ ] Checkbox 2    [ ] Checkbox 9
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7

Height = 100px (20px * 5 checkboxes):

[ ] Checkbox 1    [ ] Checkbox 6
[ ] Checkbox 2    [ ] Checkbox 7
[ ] Checkbox 3    [ ] Checkbox 8
[ ] Checkbox 4    [ ] Checkbox 9
[ ] Checkbox 5

As the height of the container element decreases, the checkboxes would automatically flow into new columns horizontally.

NOTE: I understand that I can achieve this programmatically, but I am curious if it can be done using only HTML and CSS.

html css

Answer 1

Answer №1

There are two options at your disposal.

http://codepen.io/cimmanon/pen/GvmIs

Multi-column Module

Out of the two choices, this one boasts the broadest browser compatibility. Prior to usage, you must specify the width of the columns.

ul {
  height: 25%;
  columns: 10em;
  column-fill: auto;
}

http://caniuse.com/#feat=multicolumn

Flexbox

Flexbox's support is still lacking as it has only recently moved to Candidate Recommendation status. Currently, only Opera, Chrome, and IE10+ support wrapping. To utilize, only the container's height needs to be defined.

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 25%;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

http://caniuse.com/#feat=flexbox (IE10 is the only browser with reported partial support for wrapping)

Answer 2

There are two options at your disposal.

http://codepen.io/cimmanon/pen/GvmIs

Multi-column Module

Out of the two choices, this one boasts the broadest browser compatibility. Prior to usage, you must specify the width of the columns.

ul {
  height: 25%;
  columns: 10em;
  column-fill: auto;
}

http://caniuse.com/#feat=multicolumn

Flexbox

Flexbox's support is still lacking as it has only recently moved to Candidate Recommendation status. Currently, only Opera, Chrome, and IE10+ support wrapping. To utilize, only the container's height needs to be defined.

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 25%;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

http://caniuse.com/#feat=flexbox (IE10 is the only browser with reported partial support for wrapping)

Answer 3

Answer №2

If you want to create a layout with six columns inside a div, you can achieve this with the following CSS code snippet:

.six-columns {
    -moz-column-count: 6;
    -webkit-column-count: 6;
    column-count: 6;
}

Simply assign the "six-columns" class to the wrapping element where you want the columns to be displayed.

<div class="six-columns">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
    ...
</div>

Answer 4

If you want to create a layout with six columns inside a div, you can achieve this with the following CSS code snippet:

.six-columns {
    -moz-column-count: 6;
    -webkit-column-count: 6;
    column-count: 6;
}

Simply assign the "six-columns" class to the wrapping element where you want the columns to be displayed.

<div class="six-columns">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
    ...
</div>

Is it feasible to organize checkboxes into columns using CSS?

Answer №1

Multi-column Module

Flexbox

Answer №2

Similar questions

Display solely the initial row in the tbody segment of a table. Is there a method to obscure subsequent 1st rows?

Assign a value to the cookie based on the input from the form

How to use image source and mouse hover effects in CSS3

Prevent css from reverting to its original rotation position

Center align text in the uib-progressbar

What is the most efficient method for creating and adding an element in jQuery?

Utilizing jQuery to iterate over dynamically generated elements sharing a common class

Which elements should I focus on when utilizing Media Query?

Investigating the issue of jQuery autocomplete combobox line items breaking in all versions of Internet Explorer. Let's dive into this matter

Achieving hover effects on <a> tags in CSS without using the href attribute

Does text alignment apply to one tag but not the other?

Locate the initial anchor tag using PHP

Alpha Screen and Shading Filter

What steps should be followed to display an HTML page within an HTML div?

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

Showing content in a single line causes it to drop down to the next

What is causing the div element to act as a container?

The alignment of the content within a div is mismatched compared to a div that doesn't have any

Using Angular directives to pre-select a default option