javascript - how to change the grid size in the same total space? I want the squares to stay fixed in the container and never ge

admin管理员组

文章数量:1277382

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

html.style.margin = "0px";
html.style.padding = "0px";

body.style.margin = "0px";
body.style.padding = "0px";

mainContainer.style.width = "400px";
mainContainer.style.height = "400px";

for (s = 0; s < 16; s++) {
  const firstColumn = document.createElement("div");
  firstColumn.style.display = "flex";

  mainContainer.appendChild(firstColumn);
  for (i = 0; i < 16; i++) {
    const tinySquare = document.createElement("div");
    tinySquare.className = "tiny-square";
    tinySquare.style.height = "20px";
    tinySquare.style.width = "20px";
    tinySquare.style.border = "solid 2px black";
    firstColumn.appendChild(tinySquare);
    tinySquare.addEventListener("mouseover", () => (tinySquare.style.backgroundColor = "red"));
  }

}

<div class="main-container"></div>

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

html.style.margin = "0px";
html.style.padding = "0px";

body.style.margin = "0px";
body.style.padding = "0px";

mainContainer.style.width = "400px";
mainContainer.style.height = "400px";

for (s = 0; s < 16; s++) {
  const firstColumn = document.createElement("div");
  firstColumn.style.display = "flex";

  mainContainer.appendChild(firstColumn);
  for (i = 0; i < 16; i++) {
    const tinySquare = document.createElement("div");
    tinySquare.className = "tiny-square";
    tinySquare.style.height = "20px";
    tinySquare.style.width = "20px";
    tinySquare.style.border = "solid 2px black";
    firstColumn.appendChild(tinySquare);
    tinySquare.addEventListener("mouseover", () => (tinySquare.style.backgroundColor = "red"));
  }

}

<div class="main-container"></div>

i tried turning firstColumn into a flex but still didnt work and no matter how much i fix the mainContainer's width and height it still gets out of it

i want to make a button to choose a fixed amount of squares in the grid (16x16, 32x32... etc).So im expecting the user to change the (i < 16) and (s < 16) values

changing the (i < 16) value works well by increasing the squares but still takes the same amount of pixels. firstColumn on the other hand keeps increasing vertically outside the container

• javascript

Share Improve this question Follow edited Feb 24 at 16:34 Amro Hamouda asked Feb 24 at 8:08 Amro HamoudaAmro Hamouda 333 bronze badges 2

• The height of 20px you are setting still gets respected - but the width isn't, because you are sticking those elements into a 400px wide flexbox container, and so the items will shrink in width to fit into that container. – C3roe Commented Feb 24 at 8:18
• that's the point! i want it to stay fit into the container taking the same space no matter how many squares there are (it's a task in the odin project). the problem is that i cant do it to firstColumn it keeps getting out of the container when increasing it – Amro Hamouda Commented Feb 24 at 16:32

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can set display: grid to .main-container, and add the n*n cells to this grid.
Their division into rows and columns is done thanks to gridTemplateColumns and gridTemplateRows, which divide the available space in the two directions into n rows/columns of equal size (1fr: 1 fractional unit).

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

html.style.margin = "0px";
html.style.padding = "0px";

body.style.margin = "0px";
body.style.padding = "0px";

mainContainer.style.width = "400px";
mainContainer.style.height = "400px";
mainContainer.style.display = "grid";

function generateGrid(n) {
  mainContainer.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
  mainContainer.style.gridTemplateRows = `repeat(${n}, 1fr)`;

  for (let i = 0; i < n * n; i++) {
    const tinySquare = document.createElement("div");
    tinySquare.className = "tiny-square";
    tinySquare.style.border = "solid 2px black";
    tinySquare.addEventListener(
      "mouseover",
      () => (tinySquare.style.backgroundColor = "red"),
    );
    mainContainer.appendChild(tinySquare);
  }
}

generateGrid(32);

<div class="main-container" />

Alternatively, you can do everything with display: flex, for example by setting flex-direction: column to .main-container, flex-direction: row to every grid row and asking the elements to grow (flex-grow: 1), like this:

const html = document.querySelector("html")
const body = document.querySelector("body")
const mainContainer = document.querySelector(".main-container")

html.style.margin = "0px"
html.style.padding = "0px"

body.style.margin = "0px"
body.style.padding = "0px"

mainContainer.style.width = "400px"
mainContainer.style.height = "400px"
mainContainer.style.display = "flex"
mainContainer.style.flexDirection = "column"

function generateGrid(n) {
  for (let i = 0; i < n; i++) {
    const row = document.createElement("div")
    row.style.display = "flex"
    row.style.flexDirection = "row"
    row.style.flexGrow = "1"

    for (let j = 0; j < n; j++) {
      const tinySquare = document.createElement("div")
      tinySquare.className = "tiny-square"
      tinySquare.style.border = "solid 2px black"
      tinySquare.style.flexGrow = "1"
      tinySquare.addEventListener(
        "mouseover",
        () => (tinySquare.style.backgroundColor = "red"),
      )
      row.appendChild(tinySquare)
    }

    mainContainer.appendChild(row)
  }
}

generateGrid(32)

<div class="main-container" />

If you want to keep tinySquare size (20px), you can make your firstColumn flex-wrap:nowrap and make flex-item ('tiny-square') no shrinnk so it will not shrink element inside it.

.tiny-square{
  flex-shrink: 0;
}

本文标签：