CSS Grid - periodic table (not responsive)

by ian_smithz

HTML

<h1>Periodic Table</h1>
<p>CSS Grid flag required to view in the traditional Periodic Table layout</p>
<ol class="periodic-table wrapper">
  <li data-element-group='nonmetal' data-group='1' data-period='1' class='element h '>
    <h2> Hydrogen</h2><i> H </i></li>
  <li data-element-group='noble-gas' data-group='18' data-period='1' class='element he '>
    <h2> Helium</h2><i> He </i></li>
  <li data-element-group='alkali-metal' data-group='1' data-period='2' class='element li '>
    <h2> Lithium</h2><i> Li </i></li>
  <li data-element-group='alkaline-earth-metal' data-group='2' data-period='2' class='element be '>
    <h2> Beryllium</h2><i> Be </i></li>
  <li data-element-group='metalloid' data-group='13' data-period='2' class='element b '>
    <h2> Boron</h2><i> B </i></li>
  <li data-element-group='nonmetal' data-group='14' data-period='2' class='element c '>
    <h2> Carbon</h2><i> C </i></li>
  <li data-element-group='nonmetal' data-group='15' data-period='2' class='element n '>
    <h2> Nitrogen</h2><i> N </i></li>
  <li data-element-group='nonmetal' data-group='16' data-period='2' class='element o '>
    <h2> Oxygen</h2><i> O </i></li>
  <li data-element-group='halogen' data-group='17' data-period='2' class='element f '>
    <h2> Fluorine</h2><i> F </i></li>
  <li data-element-group='noble-gas' data-group='18' data-period='2' class='element ne '>
    <h2> Neon</h2><i> Ne </i></li>
  <li data-element-group='alkali-metal' data-group='1' data-period='3' class='element na '>
    <h2> Sodium</h2><i> Na </i></li>
  <li data-element-group='alkaline-earth-metal' data-group='2' data-period='3' class='element mg '>
    <h2> Magnesium</h2><i> Mg </i></li>
  <li data-element-group='metal' data-group='13' data-period='3' class='element al '>
    <h2> Aluminum</h2><i> Al </i></li>
  <li data-element-group='metalloid' data-group='14' data-period='3' class='element si '>
    <h2> Silicon</h2><i> Si </i></li>
  <li data-element-group='nonmetal' data-group='15'...

CSS

h2 {
  font-size: 0.5em;
}

ol,
li {
  margin: 0;
  padding: 0;
  float: none;
  list-style-type: none;
}

.element {
  background: #ccc;
  border: 1px solid #222;
  border-radius: 5px;
  text-align: center;
}

@supports (not(display: grid)) and (not(display:flex)) {
  .element {
    float: left;
    min-width: 75px;
    min-height: 50px;
    margin: 3px;
  }
}

@supports (not(display: grid)) and (display:flex) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .element {
    flex-grow: 1;
    flex-basis: 75px;
    min-height: 50px;
    margin: 3px;
  }
  .lanthanoid,
  .actinoid {
    visibility: hidden;
  }
}

[data-element-group="non-metal"],
[data-element-group="nonmetal"] {
  background-color: yellow;
}

[data-element-group="metal"] {}

[data-element-group="halogen"] {
  background-color: coral;
}

[data-element-group="metalloid"] {
  background-color: #FF9999;
}

[data-element-group="metal"] {
  background-color: #FFCCCC;
}

[data-element-group="alkali-metal"] {
  background-color: #33CCFF;
}

[data-element-group="alkaline-earth-metal"] {
  background-color: #FFCC99;
}

[data-element-group="transition-metal"] {
  background-color: #66FF66;
}

[data-element-group="noble-gas"] {
  background-color: #FF99FF;
}

[data-element-group="lanthanoid"] {
  background-color: #99FFCC;
}

[data-element-group="actinoid"] {
  background-color: #33CCCC;
}

@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(10, 50px);
    max-width: 1140px;
    margin: 1em auto;
  }
  .actinoid {
    grid-column: 3;
    grid-row: 7;
  }
  .lanthanoid {
    grid-column: 3;
    grid-row: 6;
  }
  .feature-element {
    grid-column: 3/9;
    grid-row: 2/4;
    background: #eee;
  }
  .h {
    grid-column: 1;
    grid-row: 1;
  }
  .he {
    grid-column: 18;
    grid-row: 1;
  }
  .li {
    grid-column: 1;
    grid-row: 2;
  }
  .be {
    grid-column: 2;
    grid-row: 2;
  }
  .b {
  ...