Needing help forcing the div to be stuck right under this other div in CSS-CodePudding

So this is day 2 of making an HTML game. I am honestly convinced I'm making a lot of progress and I am, except,

As you can see, the word everyday is 8 letters long, so the game puts 8 spaces available.

Now here's two problems with this in general:

I want the word bank to be directly UNDER the grid, no matter the length of the grids.
I want the grids to have NO space under them, so you see the little space between every new row? Basically that needs to go poof, and not be there.

What have you tried so far?

Placing the word bank div under the game area div didn't work, so I started to look up some solutions on Google, and it told me to try to add position: absolute; and position: relative; to div 1 and 2, but that just created a mess when it came to the word bank (spacing it out WAY too much) and did nothing to the grids. Also, display: block; can't help, because the code is already using flex for a different reason.

I also tried using margin-bottom for the grid space problem, but did nothing.

Code:

// definitely didn't get the grid part from Stack Overflow
var score = 0;
var scoreDisplay = document.getElementById("score");
scoreDisplay.innerHTML = "<p>Score: "   score;
var wordBank = document.getElementById("wordBank")
var gameArea = document.getElementById("gameArea")
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// sparing you word array, nobody wants to read that list to the very last bits
var selectedWords = []
for (let i = 0; i < 5; i  ) {
  const selectedWord = words[Math.floor(Math.random() * words.length)]
  if (selectedWord.length <= 9) {
    wordBank.innerHTML  = "<span>"   selectedWord   "</span>"
    selectedWords.push(selectedWord)
  }
}
var longestWord = selectedWords.reduce((a, b) => a.length < b.length ? b : a, "")
var charCount = longestWord.length

function makeRows(rowNum) {
  for (r = 0; r < rowNum; r  ) {
    let row = document.createElement("div");
    gameArea.appendChild(row).className = "gridRow";
  };
};

function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i  ) {
    for (j = 0; j < cellNum; j  ) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    };

  };
};

function defaultGrid() {
  makeRows(charCount);
  makeColumns(charCount);
}
defaultGrid();

body {
  margin: 0px;
}

.content {
  width: 512px;
  height: 512px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial;
}

.score {
  font-size: 24px;
  text-align: right;
}

.wordBank {
  border: 2.5px solid black;
  border-radius: 5px;
  font-size: 24px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 13%;
}

.wordBank> :nth-of-type(even) {
  align-self: flex-end;
}

.gameArea {
  width: 100%;
  height: 70%;
}

.cell {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  display: inline-block;
}

<div  id="content">
  <div  id="gameArea">
  </div>
  <div  id="wordBank">
  </div>
  <div  id="score">
  </div>
</div>

How can I fix this issue? Any help is appreciated!

CodePudding user response：

You probably want to do something like this:

So, what I did was to place the .game-grid(the n by n grid) and .words-wrapper (the zig zag word cloud) in a .container. This .container is a flex that flows in a column. This shows the 2 items inside the .container one by one from top to bottom.

.game-grid itself is a grid. This lets you easily create a grid. grid-template-colums: repeat(8, 1fr) tells the browser that this grid is going to have 8 columns (this you will have to control by the length of the longest word). I set the grid to have a fixed size and all the items inside have place-items: stretch which means they take all the available space, so they will all be equal size.

Hope this helps.

.container {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100vh;
                align-items: center;
            }
            .game-grid {
                width: 50vh;
                height: 50vh;
                display: grid;
                grid-template-columns: repeat(8, 1fr);
                place-items: stretch;
                place-content: stretch;
            }

            .game-grid-item {
                border-width: 1px;
                border-style: solid;
                border-color: chocolate;
                width: 100%;
                height: 100%;
                display: grid;
                place-items: center;
            }
            .words-wrapper {
                display: flex;
                width: 100%;
                justify-content: space-between;
                height: 10vh;
                border-width: 1px;
                border-style: solid;
                border-color: blueviolet;
            }
            .even {
                align-self: flex-end;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div >
            <div >
                <div >1</div>
                <div >2</div>
                <div >3</div>
                <div >4</div>
                <div >5</div>
                <div >6</div>
                <div >7</div>
                <div >8</div>
                <div >9</div>
                <div >10</div>
                <div >11</div>
                <div >12</div>
                <div >13</div>
                <div >14</div>
                <div >15</div>
                <div >16</div>
                <div >1</div>
                <div >2</div>
                <div >3</div>
                <div >4</div>
                <div >5</div>
                <div >6</div>
                <div >7</div>
                <div >8</div>
                <div >9</div>
                <div >10</div>
                <div >11</div>
                <div >12</div>
                <div >13</div>
                <div >14</div>
                <div >15</div>
                <div >16</div>
                <div >1</div>
                <div >2</div>
                <div >3</div>
                <div >4</div>
                <div >5</div>
                <div >6</div>
                <div >7</div>
                <div >8</div>
                <div >9</div>
                <div >10</div>
                <div >11</div>
                <div >12</div>
                <div >13</div>
                <div >14</div>
                <div >15</div>
                <div >16</div>
                <div >1</div>
                <div >2</div>
                <div >3</div>
                <div >4</div>
                <div >5</div>
                <div >6</div>
                <div >7</div>
                <div >8</div>
                <div >9</div>
                <div >10</div>
                <div >11</div>
                <div >12</div>
                <div >13</div>
                <div >14</div>
                <div >15</div>
                <div >16</div>
            </div>
            <div >
                <span >multiply</span>
                <span >step</span>
                <span >kiss</span>
                <span >force</span>
                <span >ago</span>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

// replaced all uses of 'var' with either let (if I anticipated the value would change), or const
// (if the value was likely to be unchanging):
let score = 0;
const scoreDisplay = document.getElementById("score");
const wordBank = document.getElementById("wordBank")
const gameArea = document.getElementById("gameArea")
const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");
// created an Array of words (though ideally a minimal, demonstrative Array would have been in the
// posted MCVE demo code); obviously: replace with your own Array:
const words = ['hello', 'thrifty', 'gaol', 'maester', 'mandible', 'osteoarthritic', 'venerable', 'the', 'cursive'];
let selectedWords = []

// moved this line out of the variable assignments/initialisation, in order that it's easier to
// maintain the code, because related things/actions are in the same/similar place(s):
scoreDisplay.innerHTML = "<p>Score: "   score;

// the rest of the JavaScript I left alone, with the exception of adding a 'let' declaration in the
// for loops after this first one:
for (let i = 0; i < 5; i  ) {
  const selectedWord = words[Math.floor(Math.random() * words.length)]
  if (selectedWord.length <= 9) {
    wordBank.innerHTML  = "<span>"   selectedWord   "</span>"
    selectedWords.push(selectedWord)
  }
}
let longestWord = selectedWords.reduce((a, b) => a.length < b.length ? b : a, "")
let charCount = longestWord.length

function makeRows(rowNum) {
  for (let r = 0; r < rowNum; r  ) {
    let row = document.createElement("div");
    gameArea.appendChild(row).className = "gridRow";
  }
}

function makeColumns(cellNum) {
  for (let i = 0; i < rows.length; i  ) {
    for (let j = 0; j < cellNum; j  ) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

function defaultGrid() {
  makeRows(charCount);
  makeColumns(charCount);
}
defaultGrid();

/* added a simple, minimal CSS reset to normalise all element defaults
   to a similar layout-sizing method, and font-family: */

*,
::before,
::after {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}


/* added this, to help lay out the various elements more clearly: */

.content {
  display: grid;
  /* defining three rows, each of which is sized to the maximum size
     needed to clearly display the content within: */
  grid-template-rows: repeat(3, max-content);
  /* setting a margin around the element on the block-axis, which is
     perpendicular to the inline-axis, the inline-axis being the
     direction of writing in the local language; so in left-to-right
     languages this results in a top, and bottom, margin of 1em: */
  margin-block: 1em;
  /* setting a margin of auto on the inline-axis, the left and right
     margins of the element in a left-to-right language: */
  margin-inline: auto;
  /* I retained the width, but removed the height constraint: */
  width: 512px;
}

.score {
  font-size: 24px;
  text-align: right;
}

.wordBank {
  border: 2.5px solid #000;
  border-radius: 5px;
  display: flex;
  /* I left this part more ore less alone, other than adjusting
     the font-size to an 'em' based sizing for responsive purposes: */
  font-size: 1.6em;
  /* added a minimum height, in order to allow room for the words
     to move to the end within the space: */
  min-height: 3em;
  justify-content: space-between;
  padding: 0.25em;
}

.wordBank span:nth-child(even) {
  align-self: end;
}

.gameArea {
 /* removing the spaces below/between each .gridRow element, which are caused by
    the newline and whitespace characters between the .gridRow elements: */
  font-size: 0;
  /* placing the game area 'board' horizontally centered in the layout */
  justify-self: center;
  max-width: 100%;
}

.cell {
  border: 1px solid black;
  width: 50px;
  /* resetting the font-size, so that text is visible once more (despite the parent
     having a font-size of 0): */
  font-size: 1rem;
  height: 50px;
  display: inline-block;
}

<div  id="content">
  <div  id="gameArea">
  </div>
  <div  id="wordBank">
  </div>
  <div  id="score">
  </div>
</div>

JS Fiddle demo.