Splitting elements into columns with a specific number of elements in each column (html, css, javascript)

Question

I'm trying to create a layout with elements (input fields in this case), where the user can add as many of them as they want, and also remove them. The elements go into columns and each column can have a maximum of 4 elements. Here's a simple version, without the column functionality https://jsfiddle.net/khfpp2vL/2/

If there's 4 elements, it should look like this:

[1]
[2]
[3]
[4]

If a fifth element is added, it should be in its own column:

[1][5]
[2]
[3]
[4]

And with more elements:

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

And so on.

I can't create wrappers and have four elements each, because if elements are removed from the middle, the ones that are left must be able to switch to another column. For example if I remove 3 and 6 from the previous example, it would change to

[1][7]
[2][8]
[4][9]
[5][10] 

I've tried css columns, something like this http://jsfiddle.net/NJ4Hw/ (not created by me). But the problem is that I can't control the amount of elements in each column. I can change the column count with javascript when the amount of elements is divisible by 4, so I'll have the right amount of columns, but I you for example remove everything but 9 elements in the fiddle and change the column count to three, it will divide them equally like this:

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

And I need it to still have 4 elements in the first columns:

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

I also thought of a solution where the parent has a max-height, and only four elements would fit in it vertically, but I couldn't figure out how to arrange them like that. For example if I use floats, it will float 1 and 2 next each other when the space runs out.

So I'm not sure what to try next. Flexbox? Some kind of Javascript solution? Or is there some super simple solution that I haven't thought of?

Answer 1

I've tried css columns, something like this http://jsfiddle.net/NJ4Hw/ (not created by me). But the problem is that I can't control the amount of elements in each column.

You can, by controlling the height of the elements and the height of the columns in your container:

.container {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
  height: 5em;
}
.container > input {
  height: 1em;
  margin: 0;
}

<!--[if lt IE 10]>
<style>
/* This is copied from the Fiddle you referenced, I presume it's a
   fallback for IE9 and earlier not supporting columns or some such
*/
.container > input {
    width: 25%;
    float: left
}
</style>
<![endif]-->
<div class="container">
  <input type="text" value="Item 1">
  <input type="text" value="Item 2">
  <input type="text" value="Item 3">
  <input type="text" value="Item 4">
  <input type="text" value="Item 5">
  <input type="text" value="Item 6">
  <input type="text" value="Item 7">
  <input type="text" value="Item 8">
  <input type="text" value="Item 9">
  <input type="text" value="Item 10">
  <input type="text" value="Item 11">
  <input type="text" value="Item 12">
  <input type="text" value="Item 13">
  <input type="text" value="Item 14">
  <input type="text" value="Item 15">
  <input type="text" value="Item 16">
  <input type="text" value="Item 17">
  <input type="text" value="Item 18">
  <input type="text" value="Item 19">
  <input type="text" value="Item 20">
  <input type="text" value="Item 21">
  <input type="text" value="Item 22">
  <input type="text" value="Item 23">
</div>

Obviously, you'll want to tweak to make it look good. :-)

Answer 2

This can be done with CSS flex box. I put together a quick version. You can learn tweak it to get it the way you want.

http://codepen.io/aaronbalthaser/pen/vKXVvm

I added the following CSS to your code:

.inputs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 120px;
  width: 100%; 
}

.container {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start; 
}

Answer 3

You can edit the JS in your first jsfiddle to the following:

$('.add').on('click', function() {
  if($('.inputs:last .container').length > 3){
    $('.inputs:last').last().after('<div class="inputs"></div>');
  };
  $('.inputs:last').append(' \
    <div class="container"> \
        <input type="text" class="input"> \
      <button class="remove">Remove</button> \
     </div>'
   );
});

And add this to your stylesheet:

.inputs { float: left; }