问题描述
我在使css网格单元始终为正方形，在每个网格内部都具有正方形SVG元素时遇到问题。
CSS网格应100％适合父容器，并在调整浏览器大小时保持方形（最大60x60px）。
现在，我在元素的上方和下方都有一个奇怪的空白空间。
这是我目前的风格：
<style>
*{
box-sizing: border-box;
}
.zubi{
display: grid;
grid-template: repeat(2,1fr) / repeat(16,1fr);
gap: .6rem;
margin: .6rem;
}
.zub{
border-radius: .3vw;
width: 100%;
--boja-zuba-unutra: white;
--boja-zuba-spolja: currentColor;
}
</style>
我准备了代码笔示例：https://codepen.io/bojanv55/pen/JjXGLXO
有什么主意吗？谢谢。
更新
好的，我设法做到了。我只需要从元素中删除viewBox属性，然后将其移动到实际上包含svg元素（在本例中为元素）的位置。我也更新了代码笔。
解决方法
我注释了这两行：
gap: .6rem;
margin: .6rem;
能给出预期的结果吗？
编辑：
我在这里替换了1fr的{{1}}引用：
60px并赋予grid-template: repeat(2,60px) / repeat(16,60px);
100％的高度：
.zub罪魁祸首是.zub {
border-radius: .3vw;
width: 100%;
height: 100%;
--boja-zuba-unutra: white;
--boja-zuba-spolja: currentColor;
}
（1个小数单位）。有关更多信息，请参见此处：
fractional unit
1fr
尝试此“响应式”版本，看看我们是否走上了正确的轨道。它可能需要做更多的工作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ll</title>
<style>
* {
box-sizing: border-box;
}
.zubi {
display: grid;
grid-template: repeat(2,60px);
/*gap: .6rem;*/
/*margin: .6rem;*/
}
.zub {
border-radius: .3vw;
width: 100%;
height: 100%;
--boja-zuba-unutra: white;
--boja-zuba-spolja: currentColor;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="zub-5-zona" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra,white)">
<rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja,black)"/>
<path class="gore" d="M 6.8,4 L 113.2,4 79.2,38 40.8,38"/>
<path class="desno" d="M 116,6.8 L 116,113.2 82,79.2 82,40.8 116,6.8"/>
<path class="dole" d="M 6.8,116 L 113.2,116 79.2,82 40.8,82 6.8,116"/>
<path class="lijevo" d="M 4,6.8 L 38,40.8 38,79.2 4,113.2 4,6.8"/>
<path class="centar" d="M 42,42 L 78,42 78,78 42,42"/>
</symbol>
<symbol id="zub-4-zone" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra,58 40.8,58" />
<path class="desno" d="M 116,113.2 82.4,60 116,6.8" />
<path class="dole" d="M 6.8,116 78.8,62 41.08,62 6.8,116" />
<path class="lijevo" d="M 4,6.8 L 37.6,60 4,6.8" />
</symbol>
</svg>
</head>
<body>
<div class="zubi">
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
<svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
</div>
</body>
</html>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...