Html 任何将一个div拆分为网格或多个div的方法_Html_Css

Html 任何将一个div拆分为网格或多个div的方法

html css

Html 任何将一个div拆分为网格或多个div的方法,html,css,Html,Css,我正在为我的下一个项目开发核心组件，我需要一种使用HTML或JavaScript创建网格的方法，该方法将具有某种意义上相互感知的网格点。我现在的问题是我不知道如何首先制作网格。我有一个HTMLdiv800x800px，我需要将它转换成50x50px的div，唯一的问题是如果我硬编码，它将需要编写256个div并设置样式。有没有办法用JavaScript或使用画布动画将这个div拆分成这些片段 <!DOCTYPE html> <html lang="en"> <hea

我正在为我的下一个项目开发核心组件，我需要一种使用HTML或JavaScript创建网格的方法，该方法将具有某种意义上相互感知的网格点。我现在的问题是我不知道如何首先制作网格。我有一个HTMLdiv800x800px，我需要将它转换成50x50px的div，唯一的问题是如果我硬编码，它将需要编写256个div并设置样式。有没有办法用JavaScript或使用画布动画将这个div拆分成这些片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FindMyKeys</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="background">
            <div id="grid1" class="grid"></div>
        </div>
        <script src="app.js"></script>
    </body>
</html>

我不太清楚你们所说的“相互了解”是什么意思，但为什么不使用网格CSS属性呢？它似乎非常适合你想做的事情

如果你不能，你可以创建一个画布作为包装div，然后在画布中创建256个div作为绝对位置项，但我并不喜欢这样。首先，你应该解释为什么你不能真正使用CSS网格。

我所看到的CSS网格是一种格式化网站的方法，这不是我想要做的，我想把一个div变成一个多网格的网格。如果CSS网格可以为我做到这一点，我会这样做，但网格的每一部分都必须使用CSS和JavaScript进行编辑，以便我担心让它们相互了解。基本上让他们知道他们所在区域其他方块的属性。有趣的是，我现在在我的工作中建立了类似的东西，你们完全可以使用网格。请看，网格中的每个元素都有一个属性，表示该项在网格中所属的位置。它们是行开始、行结束、列开始、列结束。您可以通过JS操作这些属性！你也可以操纵网格本身，这样你就可以把它变大或其他什么。试试stackblitz，如果你有困难，我可以帮你。但你必须做一些工作测试项目first@RadekPienký我已经让它工作了，但给每个256个网格点提供ID是一件痛苦的事情。

body {
    margin:0;
}

#background {
    position:absolute;
    height:800px;
    width:800px;
    background-color:grey;
    top:100px;
    left:540px;
}