title: CSS rookie not understanding grids and flex setup (Creating a wordle game for my friends)
body: <p>I was following a youtube tutorial on how to create your own Wordle game. In that video they follow the strict 5 letter words that Wordle plays by. I want my game to have words of length 4-7.</p>
  <p>When I changed the length from 5 to varying my character boxes went vertical:
  <a href="https://i.stack.imgur.com/5EyDe.png" rel="nofollow noreferrer">Screenshot</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Tutorial: https://www.youtube.com/watch?v=j7OhcuZQ-q8
  document.addEventListener("DOMContentLoaded", () =&gt; {
      let word = "dairy";
      impactleWord();
      createSquares();
  
      let guessedWords = [
          []
      ];
  
      let availableSpace = 1;
  
  
      let guessedWordCount = 0;
  
      const keys = document.querySelectorAll('.keyboard-row button');
  
      function impactleWord() {
          let wordLibrary = [];
          let s = "impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense";
          wordLibrary = s.split(',');
          const d = new Date();
          let impactleDay = Math.round((d.getTime() / 1000 - 1648360800) / 86400);
          word = wordLibrary[impactleDay];
          document.documentElement.style.setProperty(`--cols`, `'${word.length}'`);
          // window.alert(word); // TODO: Delete -&gt; Debugging purposes only
      }
  
      function getCurrentWordArr() {
          const numberOfGuessedWords = guessedWords.length;
          return guessedWords[numberOfGuessedWords - 1];
      }
  
      function updateGuessedWords(letter) {
          const currentWordArr = getCurrentWordArr();
          if (currentWordArr &amp;&amp; currentWordArr.length &lt; word.length) {
              currentWordArr.push(letter);
  
              const availableSpaceEl = document.getElementById(String(availableSpace));
              availableSpace = availableSpace + 1;
  
              availableSpaceEl.textContent = letter;
          }
      }
  
      function getTileColor(letter, index) {
          const isCorrectLetter = word.includes(letter);
  
          if (!isCorrectLetter) {
              return "rgb(58, 58, 60)";
          }
  
          const letterInThatPosition = word.charAt(index);
          const isCorrectPosition = (letter === letterInThatPosition);
  
          if (isCorrectPosition) {
              return "rgb(83, 141, 78)";
          }
  
          return "rgb(181, 159, 59)";
      }
  
      function handleSubmitWord() {
          const currentWordArr = getCurrentWordArr();
          if (currentWordArr.length !== word.length) {
              window.alert("Word must be 5 letters");
          }
  
          const currWord = currentWordArr.join('');
  
          const firstLetterId = guessedWordCount * word.length + 1;
          const interval = 200;
          currentWordArr.forEach((letter, index) =&gt; {
              setTimeout(() =&gt; {
                  const tileColor = getTileColor(letter, index);
  
                  const letterId = firstLetterId + index;
                  const letterEl = document.getElementById(letterId);
                  letterEl.classList.add("animate__flipInX");
                  letterEl.style = `background-color:${tileColor};border-color:${tileColor}`;
              }, interval * index);
          });
  
          guessedWordCount += 1;
  
          if (currWord === word) {
              window.alert("Great success!");
          }
  
          if (guessedWords.length === word.length + 1) {
              window.alert(`Game over! The word is ${word}.`);
          }
  
          guessedWords.push([]);
      }
  
      function createSquares() {
          const gameBoard = document.getElementById("board");
  
          for (let index = 0; index &lt; word.length * (word.length + 1); index++) {
              let square = document.createElement("div");
              square.classList.add("square");
              square.classList.add("animate__animated");
              square.setAttribute("id", index + 1);
              gameBoard.appendChild(square);
          }
      }
  
      for (let i = 0; i &lt; keys.length; i++) {
          keys[i].onclick = ({ target }) =&gt; {
              const letter = target.getAttribute("data-key");
  
              if (letter === 'enter') {
                  handleSubmitWord();
                  return;
              }
              updateGuessedWords(letter);
          }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  
  html,
  body {
      height: 100%;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  #container {
      display: flex;
      background-color: black;
      height: 100%;
      align-items: center;
      flex-direction: column;
  }
  
  #game {
      width: 100%;
      max-width: 500px;
      height: 100%;
      display: flex;
      flex-direction: column;
  }
  
  header {
      border-bottom: 1px solid rgb(58, 58, 60);
  }
  
  .title {
      color: gainsboro;
      font-size: 2.5rem;
      font-weight: bold;
      margin: 0.4rem 0 0.4rem 0;
      text-align: center;
      text-transform: uppercase;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  #board-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      overflow: hidden;
  }
  
  #board {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      grid-gap: 5px;
      padding: 10px;
      box-sizing: border-box;
  }
  
  .square {
      border: 2px solid rgb(58, 58, 60);
      min-width: 60px;
      min-height: 60px;
      font-size: 44px;
      font-weight: bold;
      color: gainsboro;
      text-transform: uppercase;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  #keyboard-container {
      height: 200px;
  }
  
  .keyboard-row {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0 auto 8px;
      touch-action: manipulation;
  }
  
  .keyboard-row button {
      font-family: inherit;
      font-weight: bold;
      border: 0;
      padding: 0;
      height: 58px;
      cursor: pointer;
      background-color: rgb(129, 131, 132);
      color: rgb(215, 218, 220);
      flex-grow: 1;
      text-transform: uppercase;
      margin-right: 6px;
      border-radius: 4px;
      user-select: none;
  }
  
  .keyboard-row button.wide-button {
      flex-grow: 1.5;
  }
  
  .spacer-half {
      flex-grow: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Worlde For Friends&lt;/title&gt;
  
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="css/styles.css" /&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="game"&gt;
              &lt;header&gt;
                  &lt;h1 class="title"&gt;Friendle&lt;/h1&gt;
              &lt;/header&gt;
  
              &lt;div id="board-container"&gt;
                  &lt;div id="board"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="keyboard-container"&gt;
                  &lt;div class="keyboard-row"&gt;
                      &lt;button data-key="q"&gt;q&lt;/button&gt;
                      &lt;button data-key="w"&gt;w&lt;/button&gt;
                      &lt;button data-key="e"&gt;e&lt;/button&gt;
                      &lt;button data-key="r"&gt;r&lt;/button&gt;
                      &lt;button data-key="t"&gt;t&lt;/button&gt;
                      &lt;button data-key="y"&gt;y&lt;/button&gt;
                      &lt;button data-key="u"&gt;u&lt;/button&gt;
                      &lt;button data-key="i"&gt;i&lt;/button&gt;
                      &lt;button data-key="o"&gt;o&lt;/button&gt;
                      &lt;button data-key="p"&gt;p&lt;/button&gt;
                      &lt;div class="spacer-half"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="keyboard-row"&gt;
                      &lt;button data-key="a"&gt;a&lt;/button&gt;
                      &lt;button data-key="s"&gt;s&lt;/button&gt;
                      &lt;button data-key="d"&gt;d&lt;/button&gt;
                      &lt;button data-key="f"&gt;f&lt;/button&gt;
                      &lt;button data-key="g"&gt;g&lt;/button&gt;
                      &lt;button data-key="h"&gt;h&lt;/button&gt;
                      &lt;button data-key="j"&gt;j&lt;/button&gt;
                      &lt;button data-key="k"&gt;k&lt;/button&gt;
                      &lt;button data-key="l"&gt;l&lt;/button&gt;
                      &lt;div class="spacer-half"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="keyboard-row"&gt;
                      &lt;button data-key="enter" class="wide-button"&gt;Enter&lt;/button&gt;
                      &lt;button data-key="z"&gt;z&lt;/button&gt;
                      &lt;button data-key="x"&gt;x&lt;/button&gt;
                      &lt;button data-key="c"&gt;c&lt;/button&gt;
                      &lt;button data-key="v"&gt;v&lt;/button&gt;
                      &lt;button data-key="b"&gt;b&lt;/button&gt;
                      &lt;button data-key="n"&gt;n&lt;/button&gt;
                      &lt;button data-key="m"&gt;m&lt;/button&gt;
                      &lt;button data-key="del" class="wide-button"&gt;Del&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any explanation as to what is going wrong with the spacing and grid is much appreciated.</p>