I have create Stopwatch and I want to display laps in my HTML page in 4 columns and 4 rows on lap button click

Question

I have created a stopwatch and I want to display laps in my HTML page on lap button click but in 4 columns.

Here is my complete code: https://jsfiddle.net/waqasumer/agru2bdL/

Index.html

        <div class="row" id="laps">
        </div>

Js

var min = 0;
var sec = 0;
var msec = 0;

var getMin = document.getElementById("min");
var getSec = document.getElementById("sec");
var getmsec = document.getElementById("msec");
var interval;

function timer() {
    msec++
    getmsec.innerHTML = msec;

    if (msec >= 100) {
        sec++;
        if (sec <= 9) {
            getSec.innerHTML = "0" + sec;
        } else {
            getSec.innerHTML = sec;
        }
        msec = 0;

    } else if (sec >= 60) {
        min++;

        if (min <= 9) {
            getMin.innerHTML = "0" + min;
        } else {
            getMin.innerHTML = min;
        }
        sec = 0;
    }
}

function lapTimer() {
    var Laps = document.getElementById('laps');
    Laps.innerHTML += "<div>" + " " + getMin.innerHTML + ":" + getSec.innerHTML + ":" + getmsec.innerHTML + "</div>";
}

´´´

Answer 1

I believe this is a typical solution:

#laps > div {
  width: 25%;
  float: left;
}

This will lay out the laps in 4 columns, then repeat onto a new line once those 4 columns are populated.

If I understood this requirement correctly.