CSS/JS - Can you treat browser auto line breaks like rows to color them?

Question

I am not quite sure how to put my Question in the right words, but I try to describe what I want to do.

Let's say we have a set of data (eg. numbers) from a database and they need to be output as a list. I put a predefined amount of data-fields in a row (for dekstop systems). Every data is in a SPAN with color/margin/padding styles. (Like table-cells.) After that amount of Spans is reached, a forced line break is given. And with each line break, the background color for all spans in that "row" is altered (odd/even). So far no problem.

However, if now someone checks that page with a Smartphone (or you simple resize your Browser Window), the predefined amount does not fit anmyore. As example, in large resolutions you have 6 Spans side by side, colored odd, than 6 Spans colored even. In a small resolution you maybe only have 3 Spans side by side, however in my design you have still 6 Spans colored odd, so two "rows" with the same background-color before it is altered.

Example HTML Output:

<span class="odd">Number 01</span>
<span class="odd">Number 02</span>
<span class="odd">Number 03</span>
<span class="odd">Number 04</span>
<span class="odd">Number 05</span>
<span class="odd">Number 06</span>
<br/>
<span class="even">Number 07</span>
<span class="even">Number 08</span>
<span class="even">Number 09</span>
<span class="even">Number 10</span>
<span class="even">Number 11</span>
<span class="even">Number 12</span>
<br/>

I have absolutely no idea if it is possile to get to know - maybe through Javascript or CSS, how many spans are displayed in a "row", to automate the odd-even-coloring, make it in a way responsive.

Check my Fiddle to maybe show better what I'm trying to get.

Answer 1

Don't you want to use any css framework? Like Bootstrap or Foundation? I hope that will make your work more easier. Please go through the link. https://getbootstrap.com/examples/grid/

It already has the solution for mobile device and medium screen.

Answer 2

I can't think of any way to pull it off with CSS, but here's a javascript solution. Browser support is a little off. Didn't realize you tagged jQuery in your post, but it should work on modern browsers at least:

window.addEventListener('resize', function(){
    var cells = document.querySelectorAll('.odd,.even');
    var activeClass='even', activeLine = 0;

    for(var i = 0, len = cells.length; i < len; i++) {
        cells[i].classList.remove('odd');
        cells[i].classList.remove('even');
        if(activeLine != cells[i].offsetTop + cells[i].offsetHeight) {
            activeClass = (activeClass === 'even') ? 'odd' : 'even';
            activeLine = cells[i].offsetTop + cells[i].offsetHeight
        }
        cells[i].classList.add(activeClass);
    }
});

/* edit: forgot to dispatch the event.
   jQuery makes this so much easier to write
   than the monstrosity below. */
var event;
event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);

Demo here: http://jsfiddle.net/xh0o6gvy/1

Edit: Here is the jQuery version that Sunny put together found in a fiddle from the comment below. It's definitely a better way to go than the above code if compatibility with older browser versions is required.

function colorSpans() {
    var containers = $('.span_container');  

    containers.each(function() {
        var activeClass = 'even';        
        var activeLine = 0;
        var cells = $(this).children('.odd, .even');
        cells.each(function() {
            $(this).removeClass('odd even');
            var offset = $(this).offset();
            var height = $(this).outerHeight();
            if(activeLine != offset.top + height) {
                activeClass = (activeClass === 'even') ? 'odd' : 'even';
                activeLine = offset.top + height;
            }
            $(this).addClass(activeClass);
        });
    });        
}

$(window).on('resize', function() {
    colorSpans();
});

colorSpans();