Skip to main content

Return to Answer

added example of separator row.
Source Link
Kroltan
Kroltan
  • 5.1k
  • 5
  • 36
  • 63

You can also get an empty row using the same spacer idea:

/*
  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>

You can also get an empty row using the same spacer idea:

/*
  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>

Source Link
Kroltan
Kroltan
  • 5.1k
  • 5
  • 36
  • 63

They are not bunched up on the top right, they are bunched up on the rightmost column. Grid areas must be rectangular, not any other shape. The periodic table's layout is not rectangular, sadly.

Additionally, setting an element's grid-area will make it cover the whole area, not just one cell of it.

This causes the elements to bunch to the right, because the last column does form a rectangle.

If you want to auto-layout the elements, you could take the inverse approach, and define a bunch of "whitespace" rectangular areas, and put some elements there so they are ruled out of automatic flow.

Such an example:

/*
  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>