Javascript 具有固定宽度和高度的项目的网格

目前，我使用以下设置创建了一个10x10网格：

/*
此代码比编写多行HTML代码更容易
*/
$（文档）.ready（（）=>{
for（设i=0；i<10；i++）{
常量父项=$（“”）；
父类。添加类（“p”）；
for（设j=0；j<10；j++）{
常量child=$（“”）；
儿童。addClass（“c”）；
父。追加（子）；
}
$（“#页”）。追加（父项）；
}
});
.p{
显示器：flex；
页边顶部：1px；
}
c{
宽度：30px；
高度：30px；
左边距：1px；
背景：红色；
}
尝试将此添加到第二个示例中

.p {
    font-size:0;
}

显示
内联
元素根据其字体大小具有基本边距
请尝试使用

#page {
    font-size: 0;
}

柔性箱
在flex版本中，您会说：

单元格具有固定的高度和宽度

不，他们没有。宽度不是固定的

flex容器的初始设置为。这意味着flex项目可以从其初始大小缩小，以便保留在其容器中

该属性沿主轴应用，这意味着在行方向容器中，
flex-shrink
会影响宽度

以下是禁用了
flex-shrink
的代码：


$（文档）.ready（（）=>{
for（设i=0；i<10；i++）{
常量父项=$（“”）；
父类。添加类（“p”）；
for（设j=0；j<10；j++）{
常量child=$（“”）；
儿童。addClass（“c”）；
父。追加（子）；
}
$（“#页”）。追加（父项）；
}
});
.p{
显示器：flex；
页边顶部：1px；
}
c{
弹性收缩：0；/*新*/
宽度：30px；
高度：30px；
左边距：1px；
背景：红色；
}
创建具有所需样式的网格的一种方法是使用
表格
而不是
div
s的集合，并为
td
s设置
min width
属性


const createGrid=（行、列）=>{
const table=document.createElement（'table'）；
document.body.appendChild（表）；
for（设i=0；i
表格{
边界间距：1px；
}
运输署{
最小宽度：30px；
高度：30px；
背景：红色；
}
您的第一个代码片段不就是这样吗？您到底想要什么？添加了第二个（更简单的）解决方案。