The Periodic Table in CSS

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,

, as this is an ordered system of elements.

We then have a

1. tag for each element, and an tag.

   The name of the 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

2. 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 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

3. 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:

   The above is the detailed content of The Periodic Table in CSS. For more information, please follow other related articles on the PHP Chinese website!