Html CSS网格空单元格布局问题

我想用CSS网格制作一个元素周期表。要做到这一点，我需要多行中的空单元格-我正试图通过以下文档实现这一点：

HTML

<div class="wrapper">
    <div class="element">El</div>
    //repeated 90 times
</div>

---

但是，渲染时，似乎所有内容都集中在右上角，如下图所示：。这是为什么？

它们不是集中在右上角，而是集中在最右边的列上。 网格区域必须是矩形，而不是任何其他形状。遗憾的是，元素周期表的布局不是矩形的

此外，设置元素的

网格区域将使其覆盖整个区域，而不仅仅是其中的一个单元

这会导致元素向右聚集，因为最后一列确实形成了一个矩形

如果要自动布局元素，可以采用相反的方法，定义一组“空白”矩形区域，并将一些元素放在那里，以便排除自动流动

例如：


/*
背景和间距不需要，只是为了
增强每个元素边界的可视化。
*/
.元素{
保证金：2倍；
填充物：5px；
边框：1px纯色灰色；
}
A.垫片{
背景：道奇蓝；
网格面积：wa；
}
.B{
背景：水；
网格面积：wb；
}
.C{
背景：天蓝色；
网格面积：wc；
}
.包装纸{
显示：网格；
网格模板列：重复（18，1fr）；
网格模板区域：
“哇哇哇哇。”
“…wb wb wb wb wb wb wb wb wb wb wb wb wb……”
“…wb wb wb wb wb wb wb wb wb wb wb wb wb……”
'.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .'
'.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .'
“…wc……”
“……wc…………”；
}

埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
埃尔
我想说的是，周期表不是命名区域栅格功能的绝佳用例，而是栅格自动放置功能以及第n个子

选择器的绝佳用例。我们基本上可以

var元素=[H]、[He]、[Li]、[Be]、[B]、[C]、[N]、[O]、[F]、[Ne]、[Na]、[Mg]、[Si]、[P]、[S]、[Cl]、[Ar]、[K]、[Ca]、[Sc]、[Ti]、[Cr]、[Mn]、[Fe]、[Co]、[Ni]、[Cu]、[Zn]、[Ga]、[Ge]、[As]、[Se]、[Br]、[Kr]、[Rb]、[Rb]、[Sr]、[Sr]、[N，‘Pm’、‘Sm’、‘Eu’、‘Gd’、‘Tb’、‘Dy’、‘Ho’、‘Er’、‘Tm’、‘Yb’、‘Lu’、‘Hf’、‘Ta’、‘W’、‘Re’、‘Os’、‘Ir’、‘Pt’、‘Au’、‘Hg’、‘Tl’、‘Pb’、‘Bi’、‘Po’、‘At’、‘Rn’、‘Fr’、‘Ra’、‘Ac’、‘Th’、‘Pa’、‘U’、‘Np’、‘Pu’、‘Am’、‘Cm’、‘Bk’、‘Cf’、‘Es’、‘Fm’；
document.querySelector（'.wrapper'）.innerHTML=elements.map（el=>''+el+''）.join（''）；

.wrapper{
显示：网格；
网格模板列：重复（32，1fr）；
}
.元素{
边框：1px实心#ccc；
保证金：0-1px-1px 0；
文本对齐：右对齐；
反增量：el；
填充物：3px2px；
}
/*氦属于最后一列，也就是说，它从倒数第二条网格线开始*/
.元素：第n个子元素（2）{
网格柱：-2；
}
/*硼和铝是第三组元素，也就是说，因为它们有6列，
所以他们从第七条网格线开始，从它的末端开始计数*/
.元素：第n个子元素（5），
.元素：第n个子元素（13）{
网格柱：-7；
}
/*同样，钛和锆从第16条网格线开始，从网格端开始*/
.元素：第n个子元素（22），
.元素：第n个子元素（40）{
网格柱：-16；
}
/*只是一些装饰：）*/
.element：：之前{
内容：计数器（el）；
字体大小：.75em；
文本对齐：左对齐；
显示：块；
颜色：#888；
}

---

请记住，您不能用相同的网格区域名称命名两个元素。您的方法非常有效-但如何创建整个空行（以分隔最后两行元素）？添加另一个“wd wd wd wd wd wd wd”似乎没有任何作用。@Adam.V注意在HTML中，我必须自己创建填充元素并定位它们。是的，我对所有其他间隔重复了相同的过程。当整行为空时是否有特殊交互作用？@Adam.V其中的元素必须具有特定高度，或者您必须指定行的高度。我用一个示例编辑了答案。我明白了！忘记了高度。谢谢。这很漂亮。我知道这是离题的，但我听不到关于镧系元素和锕系元素的谈论，我会想到辛普森一家：

.element {
  grid-area: el;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
    grid-template-areas:
        'el . . . . . . . . . . . . . . . . el'
        'el el . . . . . . . . . . el el el el el el'
        'el el . . . . . . . . . . el el el el el el'
        'el el el el el el el el el el el el el el el el el el'
        'el el el el el el el el el el el el el el el el el el'
        'el el . el el el el el el el el el el el el el el el'
        'el el . el el el el el el el el el el el el el el el';
}