Mads Stoumann

Posted on Sep 8

The Periodic Table in CSS

#css #webdev #showdev #tutorial

Like the Solar System, The Periodic Table has been done in CSS a lot of times … but it has never been done as simply, as I'm about to show you.

Let's start with some basic, semantic markup:



<ol>
  <li data-mass="1.0078">
    <abbr title="Hydrogen">H</abbr>
  </li>
</ol>

We use an ordered list, <ol>, as this is an ordered system of elements.

We then have a <li> tag for each element, and an <abbr> tag.

The name of the <abbr> element is an abbreviation for the word “abbreviation”, which is cute.
— Heydon Pickering.

Now, instead of Googling the atomic mass of each element, we just ask ChatGPT to fill out the rest of the markup. We also ask it to add a 3-letter class to each element, indicating which type the element is, ie. a "noble gas" (class="nbl") etc. — and we get 118 elements:



<ol>
  <li data-mass="1.0078" class="rnm">
    <abbr title="Hydrogen">H</abbr>
  </li>
  <li data-mass="4.0026" class="nbl">
    <abbr title="Helium">He</abbr>
  </li>
  <li data-mass="6.941" class="alk">
    <abbr title="Lithium">Li</abbr>
  </li> 
  <!-- etc. -->
</ol>

It doesn't look great yet; it's just a numbered list with abbreviations for the elements.



1. H
2. He
3. Li
etc.

Let's turn the list into a 18x10 grid:



ol {
  all: unset;
  container-type: inline-size;
  counter-reset: element;
  display: grid; 
  font-size: 2cqi;
  gap: 1px;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

Now, we set each <li> to be a square box and create an internal grid to place the atomic number top-left, the mass (data-mass) in the top-right, and the <abbr> tag below:



li {
  aspect-ratio: 1 / 1;
  background: #EEEEEE;
  counter-increment: element;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: .25ch;
  transition: scale .125s ease-in;
  &::before {
    content: counter(element);
  }
  &::after {
    content: attr(data-mass);
    grid-area: 1 / 2 / 2 / 2;
    justify-self: end;
  }
  &::before, &::after {
    font-size: .33em;
  }
}

Before we see what we've accomplished, let's ask ChatGPT to add some colors to the "element-type"-classes it added earlier. Now we get:

Looks great, but not exactly like the periodic table we learned in school. Let's add some grid-magic.

For Helium, we want it to be pushed to the last column. As we know the grid is 18 columns wide, we simply add:



li {
  &:nth-of-type(2) { grid-column: 18; }
}

Since this is an ordered list, the nth-of-type value will always correspond to the atomic number of each element. We want to move Boron and Aluminum to column 13:



li {
  &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }

Let's check it out:

An improvement, for sure, but since grid-column just pushes the grid forward, how can we take elements 58-71 and 90-103 (the lathenides and actinides) completely out of their grid-flow and add them to those 2 rows below the main grid?

For that, we can use grid-area, where we define:

row-start / col-start / row-end / col-end

In our case, that'll be:



li {
   /* Lanthenides */
  &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
  &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
  &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
  /* etc. */

  /* Actinides */
  &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
  &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
  &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
  / etc. */
}

And now we get (for clarity, I've enabled Dev Tools' grid-visualizer):

Notice how the grid-elements after the element we've moved out of the flow, continue in the main flow!

Filtering

Now, let's use these "element type"-classes, we had ChatGPT generate earlier, to filter the periodic table.

First, let's add some basic HTML:



<fieldset>
  <legend>Filter</legend>
  <label>
    <input type="radio" id="alk" name="filter">
    Alkali Metals
  </label>
</fieldset>

Then, we ask chatGPT to fill out the rest, and add an "All"-option with no id:

We need a bunch of JavaScript to filter, right? No, we can do this in plain CSS:



body:has(#alk:checked) li:not(.alk) { 
  opacity: 0.2;
}

The logic works like this: If the body contains a checkbox with the id="alk" and it's checked, the styles will be applied to all <li> elements that don’t have the .alk class.

Repeat for all the types and classes.

Let's click on "metalloids":

How cool is that?

That concludes this tutorial … but wait … what does that Heisenberg filter do? It wasn't in the list of filters from ChatGPT?

Let's click it:

… and now you know my favorite TV-show of all time!

Demo

Here's a Codepen — even though it's fully responsive, I recommend viewing it on larger screens:

Top comments (24)

José Pablo Ramírez Vargas • Sep 10

Excellent! Now, how about the Gill Chaverri variant? Wikipedia.

I am Costa Rican and I was taught with this arrangement at school.

Mads Stoumann • Sep 10

Interesting! Never heard about that.

José Pablo Ramírez Vargas • Sep 10 • Edited

Yup. I only came to know the periodic table as the rest of the world knows it when I started college.

Usman Khalil • Sep 9

Handled the layout very gracefully. 🔥

Mads Stoumann • Sep 9

The magic of CSS grid!

Ishaan Sheikh • Sep 10

Looking cool, well done 👍🔥

Mads Stoumann • Sep 10

Thank you!

Oleh Nazarovych • Sep 8

Well Done

Mads Stoumann • Sep 9

Thanks!

Ashutosh_dev • Oct 4 • Edited

Heisenberg 🤟
The GOAT show Br. Bad

Mads Stoumann • Oct 4

Agree!

Nikki • Sep 11

Lovely project. One thing I would change is adding a specific width and letting it overflow on the X axis. That way you can zoom in and swipe to get a closer look.