arrange 1st half left and the rest right

Damir Krupic 0
Viewed 43

how to arrange the first half left and the second half right? (instead of the first goes left, second goes right, 3rd goes let, 4th goes right and so on)

Javascript:

  do {
    document.querySelector("main").innerHTML += 
      "<div class='timeTable'>" + 
      tempTime.format("DD-MM-YY | HH:mm") + 
      " - " + tempTime.add(30, "minutes").format("HH:mm") + 
      "</div>";
  } while (tempTime.format("HH:mm") != "19:00");

CSS:

* {
  box-sizing: border-box;
}
.timeTable {
  width: 50%;
  float: left;
  text-align: center;
}

PS: btw tempTime is a momentjs object (which is irrelevant to the question and just in case somebody is wondering)

css-float javascript css
1 Answers

found it:

main {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(9,auto);
        grid-auto-flow: column;
    }

repeat(9,auto) because of 18 boxes ... divided by 2 is 9

EDIT: basically the question was how to arrange lets say 6 (for easier understanding - instead of 18) in the question the are as follows:

1 2
3 4
5 6

in the answer (which was also asked for) they are like this:

1 4
2 5
3 6
Damir Krupic0
Related