时间戳

首页 > 解决方案 > 如何创建包含可调整大小的 div 的网格 - 永远不会超过主容器的大小？

javascript - 如何创建包含可调整大小的 div 的网格 - 永远不会超过主容器的大小？

问题描述

我可以使用 for 循环创建网格。然后，我分别提示输入行数和列数作为 x 和 y 值。我很难理解如何创建调整大小以适应容器大小的 div - 容器永远不会超过页面的大小（？）。有什么建议么？

let x = parseInt(prompt("how many rows?"));
let y = parseInt(prompt("how many columns?"));

const reset = document.getElementById("reset");

reset.addEventListener("click", function() {
  location.reload();
});

const container = document.getElementById("container");

const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");

function makeGrid() {
  makeRows(x);
  makeCols(y);
}

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

function makeCols(colNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < colNum; j++) {
      let col = document.createElement("div");
      rows[j].appendChild(col).className = "cell";
    }
  }
}

makeGrid();
:root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell {
  border: 1px solid gray;
  min-width: 30px;
  min-height: 30px;
  margin: 4px;
  display: inline-flex;
}

.cell:hover {
  cursor: pointer;
  background-color: antiquewhite;
}

.cell:active {
  background-color: antiquewhite;
}
<!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" />
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css" />
  <title>Etch-A-Sketch</title>
</head>

<body>
  <button id="reset" class="reset">RESET</button>
  <div id="container"></div>
  </div>
</body>

</html>

标签： javascripthtmlcss

解决方案

我不确定我是否理解整个问题，但这里有一个示例，它将共享网格本身的宽度和高度。

关键是使用布局并使用和单位flex固定初始网格大小。vwvh

我已经简化了代码以专注于一个最小的示例。

function makeCells(rows, columns) {
  let grid = document.getElementById("grid");
  
  for (i = 0; i < rows; i++) {
    let row = document.createElement("div");
    row.className = "row";
    
    for (j = 0; j < columns; j++) {
      let column = document.createElement("div");
      column.className = "cell";
      row.appendChild(column);
    }
    
    grid.appendChild(row);
  }
}

makeCells(4, 3);
.grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid red;
  
  width: 50vw; /* 50% of viewport width */
  height: 50vh; /* 50% of viewport height */
}

.row { 
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid blue;
  height: 100%;
}

.cell {
  border: 1px solid green;
  height: 100%;
  width: 100%;
}
<div id="grid" class="grid"></div>

推荐阅读