Пытаюсь разложить div по экрану при нажатии на Super Hard Mode

Question

В этой простой цветной игре, которую я создал, я хочу распределить 12 квадратов в двух рядах по 6, когда игрок выбирает сверхсложный режим. Также я хочу дать пользователю варианты, которые бы они предпочли цветные квадраты или треугольник. или другие формы, и я хотел бы добавить немного анимации при переключении трудностей.

var numSquares = 6;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var modeButtons = document.querySelectorAll(".mode");


init ();

function init () {
    setUpModebuttons ();
    for(var i = 0; i < modeButtons.length; i++) {
        modeButtons[i].addEventListener("click", function() {
            modeButtons[0].classList.remove("selected");
            modeButtons[1].classList.remove("selected");
            modeButtons[2].classList.remove("selected");
            this.classList.add("selected"); 
            // if (this.textContent === "Easy"){
            //      numSquares = 3;
            // }
            // else {
            //        numSquares = 6;
            // }
            this.textContent === "Easy" ?   numSquares = 3 : numSquares = 6;
            if (this.textContent === "Super Hard") {
                numSquares = 12;
            }
            reset();
        });
    }
    
    for(var i = 0; i < squares.length; i++){
        // add initial colors to squares
        squares[i].style.background = colors[i];
    
        //add click listeners to squares
        squares[i].addEventListener("click", function() {
            //grab color of clicked squares
            var clickedColor = this.style.background;
            //compare color to pickedColor
            if(clickedColor === pickedColor) {
                messageDisplay.textContent = "Correct!";
                resetButton.textContent = "Play Again?";
                changeColors(clickedColor);
                h1.style.background = clickedColor;
            } else {
                this.style.background = "#232323";
                messageDisplay.textContent = "Try Again";
            }
        });
    }
   reset ();

}
function setUpModebuttons () {
    
}



function reset() {
    colors = generateRandomColors(numSquares);
    //pick a new random color from array
    pickedColor = pickColor();
    //change colorDisplay to match picked Color
    colorDisplay.textContent = pickedColor;
    resetButton.textContent = "New Colors";
    messageDisplay.textContent = "";
    //change colors of squares
    for(var i = 0; i < squares.length; i++) {
        if(colors[i]){
            squares[i].style.display = "block";
            squares[i].style.background = colors[i];
        } else {
            squares[i].style.display = "none";
        }
    }
    h1.style.background = "steelblue";
}

resetButton.addEventListener("click", function() {
    reset();
});





function changeColors(color) {
    //loop through all squares
    for(var i = 0; i < squares.length; i++) {
        //change each color to match given color
        squares[i].style.background = color;
    }
}

function pickColor() {
    var random = Math.floor(Math.random() * colors.length);
    return colors[random];
}

function generateRandomColors(num) {
    //make an array
    var arr = [];
    //add num random colors to arr
    for(var i = 0; i < num; i++) {
        //get random color and push into arr
        arr.push(randomColor());
    }
    //return that array
    return arr;
}

function randomColor() {
    //pick a "red" from 0 - 255
    var r = Math.floor(Math.random() * 256);
    //pick a "green" from 0 - 255
    var g = Math.floor(Math.random() * 256);
    //pick a "blue" from 0 - 255
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + ", " + g + ", " + b + ")";
}

body {
    background-color: #232323;
    margin: 0em;
    font-family: "Montserrat", "Avenir";
}

.square {
    width: 30%;
    background: purple;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
    border-radius: 15%;
    transition: background 0.6s;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    /* for browser support */
    /* --webkit-transition: background-color 1.0s;
    -moz-transition: background 1.0s; */
}

#container {
    margin: 20px auto;
    max-width: 600px;
}


h1 {

    color: white;
    line-height: 1.1;
    font-weight: normal;
    text-align: center;
    background-color: steelblue;
    margin: 0em;
    text-transform: uppercase;
    padding: 20px 0;
}

#message {
    color: rgb(99, 99, 99);
}

#stripe {
    background: white;
    height: 30px;
    text-align: center;
    color: black;
}
.selected {
    color: white;
    background-color:steelblue;
}

#colorDisplay {
    font-size: 200%;
}
button {
    border: none;
    background: none;
    text-transform: uppercase;
    height: 100%;
    font-weight: 700;
    color: steelblue;
    letter-spacing: 1px;
    font-size: inherit;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    outline: none;

}

#message {
    display: inline-block;
    width: 20%;
}

button:hover {
    color: white;
    background: steelblue;
}

<!DOCTYPE html>
<html>
    <head>
        <title>
            Color game.
        </title>
        <link rel="stylesheet" href="colorGame.css">
        
    </head>
    <body>
        <h1>
            The Great
            <br>
            <span id="colorDisplay">RGB</span>
            <br>colorGame
        </h1>
        <div id="stripe">
            <button id="reset">New Colors</button>
                 <span id="message"></span>
            <button class="mode">Easy</button>
            <button class="mode selected">Hard</button>
            <button class="mode">Super Hard</button>
        </div>
        <div id="container">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
  <script type="text/javascript" src="colorGame.js"></script>
    </body>
</html>