<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            border: 1px dashed black;
        }
        #wrap div{
            width: 50px;
            height: 50px;
            background-color: #61b0ff;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div></div>
</div>
<script>
    let num = 11;
    let mid = 0;
    let html = '';
    let oWrap = document.getElementById('wrap');

    if (num%2) {
        mid = (num-1)/2;
    } else{
        mid = num/2;
    }

    oWrap.style.width = (mid+1)*50+"px";
    oWrap.style.height = (num+1)*50+"px";


    for (let i=0 ; i<=num ; i++) {
        if (i<=mid) {
            html += `<div style="margin-left: ${i*50}px;">${i}</div>`;
        }else {
            html += `<div style="margin-left: ${(num-i)*50}px;">${i}</div>`;
        }
    }
    oWrap.innerHTML = html;
</script>
</body>
</html>