I'm working on the Etch-a-Sketch project from The Odin Project which requires us to not use grid for this project, only flex, and I’m encountering a couple of issues with the layout.
Glowing Grid Divs: Some of the grid divs are glowing, which is not part of the intended space aesthetic. How can I fix this issue?
Grid Divs Not Fitting Correctly: When I set the grid to be 4x4 (i.e., 4 rows and 4 columns), it appears as 3x3, with an extra large square div in the last row. Similarly, when I input 3 for the rows and columns, it displays as 2x2x2 and a large square div at the end.
Here’s what I want to achieve: When the user clicks a button and inputs a number, the grid should generate divs in a row * row or column * column layout. However, the divs are not resizing properly to fit into the container according to the specified number of rows and columns.
What I’ve Tried: I was advised to remove margin: 2px;, which fixed the issue temporarily. However, I’d like to include the margin and still have the divs resize correctly to fit within the grid.
const divContainer = document.querySelector(".divContainer");const header = document.querySelector(".header");const buttonAsk = document.createElement("button");buttonAsk.classList.add("button-ask");header.appendChild(buttonAsk);buttonAsk.textContent = "Start Gridding";function createGrid(columns) { divContainer.innerHTML = ""; // Set the width of each .divbox based on the number of columns const boxSize = 100 / columns; // Percent size for each box divContainer.style.setProperty("--box-size", `${boxSize}%`); for (let i = 0; i < columns * columns; i++) { const divBox = document.createElement("div"); divBox.classList.add("divbox"); divBox.style.flex = `1 0 ${boxSize}%`; // Flex item size divContainer.appendChild(divBox); divBox.addEventListener("mouseover", () => { if(!divBox.classList.contains("hovered")) { divBox.classList.add("hovered"); } }); }}buttonAsk.addEventListener("click", () => { let columns = parseInt( prompt("Enter number of squares per row for new grid"), 10 ); if (columns < 0 || isNaN(columns)) { alert("Please type a number more than 0 and less than 100 :)"); return; } if (columns > 100) { alert("100 is the limit!!!"); return; } createGrid(columns);});* { margin: 0; padding: 0; box-sizing: border-box;}.header { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 50px 0;}h1 { text-align: center; margin-bottom: 20px; color: white;}body{ background-image: url(./pexels-nicole-avagliano-1132392-2706654.jpg); background-size: cover;}.button-ask { width: 100px; height: 50px; background-color: blueviolet; padding: 5px 80px; border-radius: 5px; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 16px; text-wrap: nowrap; font-weight: 700; color: bisque;}.divContainer { width: 1000px; height: 700px; display: flex; flex-wrap: wrap; margin: 0 auto; border: 5px solid tomato; box-sizing: border-box;}.divContainer { background: rgba( 0, 0, 0, 0 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 17.5px ); -webkit-backdrop-filter: blur( 17.5px ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 );}.divbox {margin: 2px; flex-basis: calc(100% / var(--columns) - 2px); aspect-ratio: 1 / 1; border-radius: 5px; background: #e0e0e0; box-shadow: 28px 28px 56px #acacac, -28px -28px 56px #ffffff;}.divbox:hover { border-radius: 5px; background: #e0e0e0; box-shadow: inset 28px 28px 56px #acacac, inset -28px -28px 56px #ffffff;}.divbox.hovered { border-radius: 5px; background: #e0e0e0; box-shadow: inset 28px 28px 56px #acacac, inset -28px -28px 56px #ffffff;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"></head><body><div class="header"><h1>Etch-a-Sketch!</h1></div><div class="divContainer"></div><script src="javascript.js"></script></body></html>I tried flex: display on container.I tried flex: 1.I tried cal(--column, ) (Chatgpt suggested this method. I don't know any other way to do this.)
I removed margin: 2px on divBox and the divs are appearing accordingly now. But how do I include the margin AND make them appear as row*row or column * column?
If you have an easier method to resize the grid divs into container please please PLEASE provide your suggestion