0

Let's I am creating an unordered list using jQuery from JSON. I want to make sure, however long the list is, that my list contains columns of five. Doesn't matter how many columns. Just that it's columns of five.

Example:

1st item    6th item
2nd item    ...
3rd item    ...
4th item
5th item

I have to mention that the order doesn't really matter to this particular use case.

Kostas Dimakis
  • 1,143
  • 1
  • 10
  • 20
  • 1
    If you're using JavaScript anyway, why not use JavaScript to put each group of 5 items in an inline-block element. – Mr Lister Nov 21 '16 at 20:07
  • Did you mean that you would like to display five (5) columns with an unlimited number of rows? – JohnH Nov 21 '16 at 20:16
  • How is everyone having trouble understanding this? Just read. He obviously wants **5 items per column** for an arbitrary number of items -not 5 columns. – canon Nov 21 '16 at 20:23
  • 1
    @canon You are correct sir. It's as I described. – Kostas Dimakis Nov 21 '16 at 20:26
  • @KonstantinosDimakis You can use flexbox like [here](http://stackoverflow.com/questions/29546550/how-to-force-a-flex-box-to-display-4-items-per-row). It's simple and css only, but it will work only in modern browsers. I'm not going to do any example. – Martin Jinda Nov 21 '16 at 20:35
  • Not sure if something like this could be solution: https://jsfiddle.net/w1rg7x9v/ Problem: you have to set fixed height for list items and container... – sinisake Nov 21 '16 at 20:44
  • @nevermind yes that solution occurred to me, but I didn't want to set fixed height. Thanks though :) – Kostas Dimakis Nov 21 '16 at 20:48
  • why cant you use column-count:5 – Geeky Nov 21 '16 at 21:18
  • this link could be helpful to you http://stackoverflow.com/questions/31621257/how-to-control-number-of-items-per-row-using-media-queries-in-flexbox – Geeky Nov 21 '16 at 21:29
  • 1
    @Geeky column-width + height would do , but even then flex is more ... flexible. http://codepen.io/gc-nomade/pen/LbWrrd Problem , op do not want to set a fixed height. So CSS on itself is not an option :( – G-Cyrillus Nov 21 '16 at 22:44
  • @Geeky if you **actually read** the OP's question and look at his sample output, you'll see that he's not looking for a pre-defined number of _columns_. He's looking for a pre-defined number of _rows_ across an arbitrary number of items/columns. – canon Nov 22 '16 at 15:15
  • If it's not possible, then by all means answer it's not possible. But please be certain of your answer. – Kostas Dimakis Nov 22 '16 at 17:29

0 Answers0