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)
Excellent! Now, how about the Gill Chaverri variant? Wikipedia.
I am Costa Rican and I was taught with this arrangement at school.
Interesting! Never heard about that.
Yup. I only came to know the periodic table as the rest of the world knows it when I started college.
Handled the layout very gracefully. 🔥
The magic of CSS grid!
Looking cool, well done 👍🔥
Thank you!
Well Done
Thanks!
Heisenberg 🤟
The GOAT show Br. Bad
Agree!
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.
Super impressive, you unleashed the css beast
Thank you!
Oh, this looks amazing! 😍 I really appreciate your efforts 🙌😊.
Thank you!
Crazy good 👍
Thanks!
Great!
Thanks!
Perfectly put!
Thanks!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.