ソース
test.html
<div id="div1"></div>

<script>
    var x = 0
    var y = 0
    var vec = 0//↑→↓←の順で0~3
    var co = 0
    var max = 1

    var num = 100//ボタンの数
    var margin = 40//ボタン間の距離
    var div1 = document.getElementById("div1")

    function next() {
        if (co == max) {
            co = 0
            if (vec == 1 || vec == 3) { max++ }
            vec++;
            if (vec > 3) { vec = 0 }
        }
        co++

        if (vec == 0) {
            y++
        } else if (vec == 1) {
            x++
        } else if (vec == 2) {
            y--
        } else if (vec == 3) {
            x--
        }
    }

    for (var i = 0; i < num; i++) {
        var b = document.createElement("button")
        b.innerText = "" + i
        b.style.position = "absolute"
        b.style.left = window.innerWidth / 2 + x * margin + "px"
        b.style.top = window.innerHeight / 2 + y * margin + "px"
        b.style.backgroundColor="rgb("+(250-i)+",250,100)"
        div1.appendChild(b)

        next()
    }
</script>
結果
何に使えるかはわかりません