Group and show items of same type

[harshapps]

I have a list of items and these items are to be grouped together based on a class and shown with boxes.

Suppose I have 5 items like this:

https://codepen.io/harshapps/pen/PEZjoB

I need boxes in this pattern:
https://ibb.co/njXYkR

Once we add a new item to the Dom with a class of 1, the box needs to add the new item to the first box.

Can anyone help me out in how to group the items which have the same class and how do we show a box with CSS on the items which have same class?

[Paulie_D]

It’s something that’s probably best left to JS but flexbox can sort them that using the order property.

https://codepen.io/Paulie-D/pen/QaKYKK

There is no possibility of adding a border since there is no element to apply it to. You could possibly do something with pseudo-elements but that sounds really messy especially as you there is no nth-of-class.

Frankly it makes more sense to ensure that your elements are encapsulated before they are added to the DOM….not after.

But as I said, you’re better of doing this with JS.

[wadewilson]

good answer, thanks for help

[Author]

Posts