CSS网格空单元格布局问题

Question

我正在尝试使用 CSS 网格制作元素周期表。为此，我需要多行中的空单元格 - 我正在尝试使用此处显示的文档来实现这一点：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

HTML

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

CSS

.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';
}

但是，在渲染时，似乎所有内容都聚集在右上角，如下所示：https://jsfiddle.net/agreyfield91/9qnwv16u/9/。这是为什么呢？

Answer 1

我会说元素周期表是一个绝妙的用例，不是用于命名区域网格功能，而是用于网格自动放置功能以及:nth-child 选择器。我们基本上可以express the Periodical law itself in our CSS！

var elements = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne', 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr', 'Rb', 'Sr', 'Y', 'Zr', 'Nb', 'Mo', 'Tc', 'Ru', 'Rh', 'Pd', 'Ag', 'Cd', 'In', 'Sn', 'Sb', 'Te', 'I', 'Xe', 'Cs', 'Ba', 'La', 'Ce', 'Pr', 'Nd', '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', 'Md', 'No', 'Lr', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og'];

document.querySelector('.wrapper').innerHTML = elements.map(el => '<div class="element">'+el+'</div>').join('');

.wrapper {
  display: grid;
  grid-template-columns: repeat(32, 1fr);
}

.element {
  border: 1px solid #ccc;
  margin: 0 -1px -1px 0;
  text-align: right;
  counter-increment: el;
  padding: 3px 2px;
}

/* Helium belongs to the last column, that is, it starts at second-to-last grid line */
.element:nth-child(2) {
  grid-column: -2;
}

/* Boron and Aluminim are 3rd group elements, that is, there are 6 columns since them,
   so they start at the 7th grid line counting from its end */
.element:nth-child(5),
.element:nth-child(13) {
  grid-column: -7;
}

/* similarly, Titanium and Zirconium start at 16th grid line from the grid end */
.element:nth-child(22),
.element:nth-child(40) {
  grid-column: -16;
}

/* just some decoration :) */
.element::before {
  content: counter(el);
  font-size: .75em;
  text-align: left;
  display: block;
  color: #888;
}

<div class="wrapper"></div>

只需稍加改动，您就可以modify the presentation of the table，例如，将镧系元素和锕系元素移动到单独的行中：

var elements = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne', 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr', 'Rb', 'Sr', 'Y', 'Zr', 'Nb', 'Mo', 'Tc', 'Ru', 'Rh', 'Pd', 'Ag', 'Cd', 'In', 'Sn', 'Sb', 'Te', 'I', 'Xe', 'Cs', 'Ba', 'La', 'Ce', 'Pr', 'Nd', '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', 'Md', 'No', 'Lr', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og'];

document.querySelector('.wrapper').innerHTML = elements.map(el => '<div class="element">'+el+'</div>').join('');

.wrapper {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: 1fr;
}

.element {
  border: 1px solid #ccc;
  margin: 0 -1px -1px 0;
  text-align: right;
  counter-increment: el;
  padding: 3px 2px;
}

/* Helium belongs to the last column, that is, it starts at second-to-last grid line */
.element:nth-child(2) {
  grid-column: -2;
}

/* Boron and Aluminim are 3rd group elements, that is, there are 6 columns since them,
   so they start at the 7th grid line counting from its end */
.element:nth-child(5),
.element:nth-child(13) {
  grid-column: -7;
}

/* similarly, Titanium and Zirconium (as well as Hafnium and Rutherfordium)
   start at 16th grid line from the grid end */
.element:nth-child(22),
.element:nth-child(40) {
  grid-column: -16;
}

/* Lanthanide */
.element:nth-child(n + 57):nth-child(-n + 71) {
  background-color: pink;
}
.element:nth-child(n + 58):nth-child(-n + 71) {
  grid-row: 9;
}

/* Actinide */
.element:nth-child(n + 89):nth-child(-n + 103) {
  background-color: yellow;
}
.element:nth-child(n + 90):nth-child(-n + 103) {
  grid-row: 10;
}


/* just some decoration :) */
.element::before {
  content: counter(el);
  font-size: .75em;
  text-align: left;
  display: block;
  color: #888;
}

<div class="wrapper"></div>

Answer 2

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

此外，设置元素的grid-area 将使其覆盖整个区域，而不仅仅是其中的一个单元格。

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

如果你想自动布局元素，你可以采取相反的方法，定义一堆“空白”矩形区域，然后将一些元素放在那里，这样它们就会被排除在自动流动之外。

这样的例子：

/*
  backgrounds and spacings not needed, just there to
  enhance visualization of each element's boundaries.
*/

.element {
  margin: 2px;
  padding: 5px;
  border: 1px solid gray;
}

.spacerA {
  background: dodgerblue;
  grid-area: wa;
}

.spacerB {
  background: aqua;
  grid-area: wb;
}

.spacerC {
  background: skyblue;
  grid-area: wc;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
    grid-template-areas:
        '.  wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa .'
        '.  .  wb wb wb wb wb wb wb wb wb wb .  .  .  .  .  .'
        '.  .  wb wb wb wb wb wb wb wb wb wb .  .  .  .  .  .'
        '.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .'
        '.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .'
        '.  .  wc .  .  .  .  .  .  .  .  .  .  .  .  .  .  .'
        '.  .  wc .  .  .  .  .  .  .  .  .  .  .  .  .  .  .';
}

<div class="wrapper">
<div class="spacerA"></div>
<div class="spacerB"></div>
<div class="spacerC"></div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
</div>

您也可以使用相同的分隔符想法获得一个空行：

/*
  backgrounds and spacings not needed, just there to
  enhance visualization of each element's boundaries.
*/

.element {
  margin: 2px;
  padding: 5px;
  border: 1px solid gray;
}

.spacerA {
  background: dodgerblue;
  grid-area: wa;
}

.spacerB {
  background: aqua;
  grid-area: wb;
}

.spacerC {
  background: skyblue;
  grid-area: wc;
}

.spacerD {
  background: green;
  grid-area: wd;
  height: 2em;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
    grid-template-areas:
        '.  wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa . '
        '.  .  wb wb wb wb wb wb wb wb wb wb .  .  .  .  .  . '
        '.  .  wb wb wb wb wb wb wb wb wb wb .  .  .  .  .  . '
        '.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . '
        '.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . '
        '.  .  wc .  .  .  .  .  .  .  .  .  .  .  .  .  .  . '
        '.  .  wc .  .  .  .  .  .  .  .  .  .  .  .  .  .  . '
        'wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd';
}

<div class="wrapper">
<div class="spacerA"></div>
<div class="spacerB"></div>
<div class="spacerC"></div>
<div class="spacerD"></div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
<div class="element">El</div>
</div>