CSS网格具有'；鬼'；空牢房——它们来自哪里？

我有一个12个iFrame的列表，我想把它们排列成一个3 x 4的网格

这是我试图转换为网格的代码片段：

<p>
    <iframe 1></iframe>
    <br>
    <iframe 2></iframe>
    <br>
    <iframe 3></iframe>
    <br>
</p>

然而，当我尝试使用CSS网格时，似乎有“ghost”空子元素填充在每个iframe之间

这是怎么回事？

根据您的代码，在每个

iframe

之间有一些

，您可以检查

的循环

渲染逻辑，查看它们的来源。删除所有

---

顺便说一下，

display:grid

现在正应用于

元素，建议将其也更改为

：）

嗨，谢谢。建议创建表示问题的代码段。在您的例子中，
元素是“幽灵”空孩子的原因。如果你修改了这个问题，我会回答的。嗨@userlond-是的，很抱歉忽略了这个问题！我现在已经添加了它。现在我明白你对
的看法了。这是有道理的。我不确定如何减轻它，因为我不能控制源代码，只有CSS。谢谢：-）我不能控制源代码，只有CSS，所以我希望找到一个仅通过CSS工作的解决方法。你可以隐藏
元素：

br{display:none；}

但iFrame的高度是固定的，因此您可以看到每行之间的空白。您可以通过编写

#tab-f49340a9-112e-0>div>div>p iframe{height:auto；}

Omg@SaraStoimenovska来解决这个问题您太棒了，谢谢^_^

#tab > div > div > p 
{
display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
#tab > div > div > p iframe {
    width:100%;
}