Moving Li To Next Column

I've got a simple ul like so : As you can see here, category 2 is at the very bottom and category 3 is in the middle. I want to be able to move them to the next column dynamically

Solution 1:

You could apply the break-before property to the .categ class, but then you end up with three columns:

var item = $(".item")
var categ = $(".categ")

ul {
  font-family: calibri, verdana, arial;
  min-height: 500px;
  float: none;
  margin: auto;
  list-style: none;
  column-count: 4;
  column-width: 25%;
  column-gap: 1rem;
  column-rule: 1px solid gray;
  box-sizing: border-box;
}
.categ {
  break-before: column;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script><ul><liclass="categ">category 1</li><liclass="item">test 1</li><liclass="item">test 2</li><liclass="categ">category 2</li><liclass="item">test 3</li><liclass="item">test 4</li><liclass="item">test 5</li><liclass="item">test 6</li><liclass="item">test 7</li><liclass="item">test 8</li><liclass="categ">category 3</li><liclass="item">test 9</li><liclass="item">test 10</li><liclass="item">test 11</li><liclass="item">test 12</li></ul>

You have to alter the DOM in order to get this to work. In the following snippet I've made "sublists" out of the .categ list items and all their following .item siblings (using jQuery as you'd included it in your snippet). I've also added a class to the top-most ul so as to differentiate it for styling. You could also use a class on the uls for the "sublists" instead of using the child selector as I did.

$(".categ").each((idx, cat) => $(cat).nextUntil(".categ", ".item").addBack().wrapAll("<li><ul>"));

ul.target {
  font-family: calibri, verdana, arial;
  min-height: 500px;
  float: none;
  column-count: 4;
  column-width: 25%;
  column-gap: 1rem;
  column-rule: 1px solid gray;
  box-sizing: border-box;
}
ul {
  margin: auto;
  list-style: none;
}
ul > li > ul { 
  break-after: column;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script><ulclass="target"><liclass="categ">category 1</li><liclass="item">test 1</li><liclass="item">test 2</li><liclass="categ">category 2</li><liclass="item">test 3</li><liclass="item">test 4</li><liclass="item">test 5</li><liclass="item">test 6</li><liclass="item">test 7</li><liclass="item">test 8</li><liclass="categ">category 3</li><liclass="item">test 9</li><liclass="item">test 10</li><liclass="item">test 11</li><liclass="item">test 12</li></ul>

Solution 2:

Disclaimer, I'm a little unsure about what you're trying to do:

I think the problem is not the presentation rules (CSS) you apply to your data (HTML). I think the problem is dat your data does not provide enough context for you presentation rules to act upon.

What I think you're trying to do is to have 3 (or more) separate lists presented on something that looks like a footer. However your HTML structures does not seem to properly match this scheme.

Try to make your HTML more explicit. Why put everything in one list instead of one list per category? Then you could justify the categories the way you want by either floats or flex or even grid layouts. I don't see why you should need jQuery for this?

Or have I misinterpreted your question?