Grid display separates when viewed fullscreen

I’m having trouble understanding whats going on with a grid I created. I made some code for a grid via javascript that changes the cell color when the mousepointer passes over it, however whenever I view this grid in a fullscreen window the view of the grid changes to four separate columns. This only happens when I look at the grid in fullscreen however, when viewing the grid in any smaller sized window it looks exactly how you envison a grid; with no spaces in between columns.

gridProblem

This is how the grid looks fullscreen with the spacing issue shown

grid solution

This is how the grid looks in any window sizing outside of maximized, and how I would like the grid to display 100% of the time.

Just in case, here is the code I’m using:

HTML:

    <!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">
    <link rel="stylesheet" href="styles.css">
    <title>Etch N Sketch</title>
</head>
<body>
<div class="container" id="container"></div>
<script src="script.js"></script>
</body>
</html>

Javascript:

const board = document.getElementById("container");
for (x=0; x <= 15; x++) {
    const cell = document.createElement('div');
    cell.className = "cells";
    cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
    cell.style.backgroundColor = "blue";
    cell.style.border = "solid 2px";
    cell.style.borderColor = "black";
    board.style.columnGap = "0px";
    board.style.display ="grid";
    board.style.gridTemplateColumns = "auto auto auto auto";
    board.appendChild(cell);
    cell.addEventListener("mouseover", change = () => 
    cell.style.backgroundColor = "red")
    cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue")
}

Answer

The issue is that you set the width and height to be absolute values here

cell.setAttribute("style", "height: 200px; width: 200px; color: black;");

so at a smaller screen size 200px is fine but once the area that the squares need to cover becomes larger than 200px your limiting them by having these values tied to them.

Advertisement

Answer