[我正在尝试为由2000x2000单元格组成的学校项目开发一个简单的目标网页。我正在寻找一个具有吸引力的设计的不错的解决方案，而不是具有垂直和水平滚动条的常规网格，而是响应式网格。总共将有4000000个单元格。问题是我找不到一种简单的方法来用图像填充单元格。我会更好地解释一下，如果我需要一个由自定义n x n单元格构成的空间，是否可以通过简单地添加新媒体并设置区域来更新代码？
例如：第一次：媒体A，面积1000x1000第二次：媒体B，面积3000x3000第3次：媒体C，区域10x10
[我想也许我可以添加一个计数器来显示剩余多少空闲单元。
此刻我发现不错的唯一解决方案是这个（请参阅here）
<!doctype html>
<title>Example</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 20px;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>我随时可以澄清，我希望有人知道如何给我一些建议，因为我不知道从哪里开始。
谢谢。
如果只需要填写一些图像，我建议使用Django（Python框架）。这样，您可以使用for循环创建网格，因此不必单独创建每个元素。