Thiết kế website giá rẻ

Question

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 4×4 (i.e., 4 rows and 4 columns), it appears as 3×3, 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

Thiết kế website giá rẻ

Danh mục

Divs in container Glowing and Not Fitting Properly [closed]