Skip to content

Instantly share code, notes, and snippets.

@hagb4rd
Created October 3, 2022 08:13
Show Gist options
  • Save hagb4rd/f7c7f3b58be9748b7ef95315e2e5f9d1 to your computer and use it in GitHub Desktop.
Save hagb4rd/f7c7f3b58be9748b7ef95315e2e5f9d1 to your computer and use it in GitHub Desktop.
Responsive Periodic Table with CSS Grids
<ol class="periodic-table">
<li class="hydrogen">
<abbr title="Hydrogen">H</abbr>
</li>
<li id="helium" class="noble-gas">
<abbr title="Helium">He</abbr>
<span>2</span>
</li>
<li class="alkali">
<abbr title="Lithium">Li</abbr>
</li>
<li class="alkaline">
<abbr title="Beryllium">Be</abbr>
</li>
<li id="boron" class="metalloid">
<abbr title="Boron">B</abbr>
</li>
<li class="polyatomic-non-metal">
<abbr title="Carbon">C</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Nitrogen">N</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Oxygen">O</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Fluorine">F</abbr>
</li>
<li class="noble-gas">
<abbr title="Neon">Ne</abbr>
</li>
<li class="alkali">
<abbr title="Sodium">Na</abbr>
</li>
<li class="alkaline">
<abbr title="Magnesium">Mg</abbr>
</li>
<li id="aluminium">
<abbr title="Aluminium">Al</abbr>
</li>
<li class="metalloid">
<abbr title="Silicon">Si</abbr>
</li>
<li class="polyatomic-non-metal">
<abbr title="Phosphorus">P</abbr>
</li>
<li class="polyatomic-non-metal">
<abbr title="Sulphur">S</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Chlorine">Cl</abbr>
</li>
<li class="noble-gas">
<abbr title="Argon">Ar</abbr>
</li>
<li class="alkali">
<abbr title="Potassium">K</abbr>
</li>
<li class="alkaline">
<abbr title="Calcium">Ca</abbr>
</li>
<li>
<abbr title="Scandium">Sc</abbr>
</li>
<li>
<abbr title="Titanium">Ti</abbr>
</li>
<li>
<abbr title="Vanadium">Ti</abbr>
</li>
<li>
<abbr title="Chromium">Cr</abbr>
</li>
<li>
<abbr title="Manganese">Mn</abbr>
</li>
<li>
<abbr title="Iron">Fe</abbr>
</li>
<li>
<abbr title="Cobalt">Co</abbr>
</li>
<li>
<abbr title="Nickel">Ni</abbr>
</li>
<li>
<abbr title="Copper">Cu</abbr>
</li>
<li>
<abbr title="Zinc">Zn</abbr>
</li>
<li>
<abbr title="Gallium">Ga</abbr>
</li>
<li class="metalloid">
<abbr title="Germanium">Ge</abbr>
</li>
<li class="metalloid">
<abbr title="Arsenic">As</abbr>
</li>
<li class="polyatomic-non-metal">
<abbr title="Selenium">Se</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Bromide">Br</abbr>
</li>
<li class="noble-gas">
<abbr title="Krypton">Kr</abbr>
</li>
<li class="alkali">
<abbr title="Rubidium">Rb</abbr>
</li>
<li class="alkaline">
<abbr title="Strontium">Sr</abbr>
</li>
<li>
<abbr title="Yttrium">Y</abbr>
</li>
<li>
<abbr title="Zirconium">Zr</abbr>
</li>
<li>
<abbr title="Niobium">Nb</abbr>
</li>
<li>
<abbr title="Molybdenum">Mo</abbr>
</li>
<li>
<abbr title="Technetium">Tc</abbr>
</li>
<li>
<abbr title="Ruthenium">Ru</abbr>
</li>
<li>
<abbr title="Rhodium">Ro</abbr>
</li>
<li>
<abbr title="Palladium">Pd</abbr>
</li>
<li>
<abbr title="Silver">Ag</abbr>
</li>
<li>
<abbr title="Cadmium">Cd</abbr>
</li>
<li>
<abbr title="Indium">In</abbr>
</li>
<li>
<abbr title="Tin">Sn</abbr>
</li>
<li class="metalloid">
<abbr title="Antimony">Sb</abbr>
</li>
<li class="metalloid">
<abbr title="Tellurium">Te</abbr>
</li>
<li class="diatomic-nonmetal">
<abbr title="Iodine">I</abbr>
</li>
<li class="noble-gas">
<abbr title="Xenon">Xe</abbr>
</li>
<li class="alkali">
<abbr title="Caesium">Cs</abbr>
</li>
<li class="alkaline">
<abbr title="Barium">Ba</abbr>
</li>
<li class="lanthanide">
<abbr title="Lanthanum">La</abbr>
</li>
<li id="cerium" class="lanthanide">
<abbr title="Cerium">Ce</abbr>
</li>
<li class="lanthanide">
<abbr title="Praseodymium">Pr</abbr>
</li>
<li class="lanthanide">
<abbr title="Neodymium">Nd</abbr>
</li>
<li class="lanthanide">
<abbr title="Promethium">Pm</abbr>
</li>
<li class="lanthanide">
<abbr title="Samarium">Sm</abbr>
</li>
<li class="lanthanide">
<abbr title="Europium">Eu</abbr>
</li>
<li class="lanthanide">
<abbr title="Gadolinium">Gd</abbr>
</li>
<li class="lanthanide">
<abbr title="Terbium">Td</abbr>
</li>
<li class="lanthanide">
<abbr title="Dysprosium">Dy</abbr>
</li>
<li class="lanthanide">
<abbr title="Holmium">Ho</abbr>
</li>
<li class="lanthanide">
<abbr title="Erbium">Er</abbr>
</li>
<li class="lanthanide">
<abbr title="Thulium">Tm</abbr>
</li>
<li class="lanthanide">
<abbr title="Ytterbium">Yb</abbr>
</li>
<li class="lanthanide">
<abbr title="Lutetium">Lu</abbr>
</li>
<li id="hafnium">
<abbr title="Hafnium">Hf</abbr>
</li>
<li>
<abbr title="Tantalum">Ta</abbr>
</li>
<li>
<abbr title="Tungsten">W</abbr>
</li>
<li>
<abbr title="Rhenium">Re</abbr>
</li>
<li>
<abbr title="Osmium">Os</abbr>
</li>
<li>
<abbr title="Iridium">Ir</abbr>
</li>
<li>
<abbr title="Platinum">Pt</abbr>
</li>
<li>
<abbr title="Gold">Au</abbr>
</li>
<li>
<abbr title="Mercury">Hg</abbr>
</li>
<li>
<abbr title="Thallium">Tl</abbr>
</li>
<li>
<abbr title="Lead">Pb</abbr>
</li>
<li>
<abbr title="Bismuth">Bi</abbr>
</li>
<li>
<abbr title="Polonium">Po</abbr>
</li>
<li class="metalloid">
<abbr title="Astatine">At</abbr>
</li>
<li class="noble-gas">
<abbr title="Radon">Rn</abbr>
</li>
<li class="alkali">
<abbr title="Francium">Fr</abbr>
</li>
<li class="alkaline">
<abbr title="Radium">Ra</abbr>
</li>
<li class="actinide">
<abbr title="Actinium">Ac</abbr>
</li>
<li class="actinide" id="thorium" >
<abbr title="Thorium">Th</abbr>
</li>
<li class="actinide">
<abbr title="Protactinium">Pa</abbr>
</li>
<li class="actinide">
<abbr title="Uranium">U</abbr>
</li>
<li class="actinide">
<abbr title="Neptunium">Np</abbr>
</li>
<li class="actinide">
<abbr title="Plutonium">Up</abbr>
</li>
<li class="actinide">
<abbr title="Americium">Am</abbr>
</li>
<li class="actinide">
<abbr title="Curium">Cm</abbr>
</li>
<li class="actinide">
<abbr title="Berkelium">Bk</abbr>
</li>
<li class="actinide">
<abbr title="Californium">Cf</abbr>
</li>
<li class="actinide">
<abbr title="Einsteinium">Es</abbr>
</li>
<li class="actinide">
<abbr title="Fermium">Fm</abbr>
</li>
<li class="actinide">
<abbr title="Mendelevium">Md</abbr>
</li>
<li class="actinide">
<abbr title="Nobelium">No</abbr>
</li>
<li class="actinide">
<abbr title="Lawrencium">Lr</abbr>
</li>
<li id="rutherfordium">
<abbr title="Rutherfordium">Rf</abbr>
</li>
<li>
<abbr title="Dubnium">Db</abbr>
</li>
<li>
<abbr title="Seaborgium">Sg</abbr>
</li>
<li>
<abbr title="Bohrium">Bh</abbr>
</li>
<li>
<abbr title="Hassium">Hs</abbr>
</li>
<li class="unknown">
<abbr title="Meitnerium">Mt</abbr>
</li>
<li class="unknown">
<abbr title="Darmstadtium">Ds</abbr>
</li>
<li class="unknown">
<abbr title="Roentgenium">Rg</abbr>
</li>
<li>
<abbr title="Copernicium">Cn</abbr>
</li>
<li class="unknown">
<abbr title="Nihonium">Cn</abbr>
</li>
<li class="unknown">
<abbr title="Flerovium">Fl</abbr>
</li>
<li class="unknown">
<abbr title="Moscovium">Mc</abbr>
</li>
<li class="unknown">
<abbr title="Livermorium">Lv</abbr>
</li>
<li class="unknown">
<abbr title="Tennessine">Ts</abbr>
</li>
<li class="unknown">
<abbr title="Oganesson">Og</abbr>
</li>
</ol>

Responsive Periodic Table with CSS Grids

Using the CSS grid spec to create a responsive table of elements

A Pen by hagb4rd on CodePen.

License.

// A few notes of things that might not be immediately apparent from reading the CSS spec:
// placing a grid child element at a grid-column-start position (Helium, for example), automatically creates that number of columns: 18, in this case
// subsequent child elements "flow" from that new point automatically
// I've set the height of the elements using vw units, but it could be more accurately determined using calc
@font-face {
font-family: Phenomena;
src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Regular.otf);
font-weight: normal;
}
@font-face {
font-family: Phenomena;
src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Bold.otf);
font-weight: bold;
}
* {
box-sizing: border-box;
}
body {
font-family: Phenomena, script;
margin: 5vw;
background: #111;
color: #000;
counter-reset: element;
}
.periodic-table {
display: grid;
grid-column-gap: .5vw;
grid-row-gap: .5vw;
padding-left: 0;
}
.periodic-table > li {
display: flex;
position: relative;
justify-content: center;
align-items: center;
height: 4.5vw;
border-radius: 3px;
background: rgb(91, 194, 234);
font-weight: bold;
}
.periodic-table > li:before {
counter-increment: element;
content: counter(element);
position: absolute;
bottom: 5px;
left: 6px;
font-size: .9vw;
font-weight: lighter;
}
.periodic-table > li abbr {
font-size: 2.5vw;
}
#helium {
grid-column-start: 18;
}
#boron, #aluminium {
grid-column-start: 13;
}
#cerium, #thorium {
grid-column-start: 4;
}
.periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
grid-row-start: 8;
}
.periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
grid-row-start: 9;
}
.periodic-table:before {
display: block;
content: '';
grid-row: 8 / 10;
grid-column: 1 / 4;
}
.periodic-table .noble-gas {
background: rgb(234, 218, 36);
}
.periodic-table .diatomic-nonmetal {
background: rgb(234, 179, 127);
}
.periodic-table .alkali {
background: hsl(326, 52%, 84%);
}
.periodic-table .hydrogen {
background: rgb(163, 199, 210);
}
.periodic-table .alkaline {
background: hsl(120, 52%, 84%);
}
.periodic-table .unknown {
background: hsl(210, 2%, 73%);
}
.periodic-table .lanthanide {
background: hsl(183, 54%, 84%);
}
.periodic-table .actinide {
background: hsl(82, 60%, 56%);
}
.periodic-table .metalloid {
background: hsl(142, 60%, 56%);
}
.periodic-table .polyatomic-non-metal {
background: hsl(358, 60%, 56%);
}
@media all and (max-width: 1100px) {
#helium, #boron, #aluminium, #cerium, #thorium {
grid-column-start: auto;
}
.periodic-table {
grid-template-columns: 1fr 1fr 1fr;
}
.periodic-table > li abbr {
font-size: 0;
}
.periodic-table > li {
padding: 1rem;
}
.periodic-table > li abbr:after {
content: attr(title);
font-size: 2rem;
}
.periodic-table > li:before {
font-size: 1rem;
}
.periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
grid-row-start: auto !important;
}
.periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
grid-row-start: auto !important;
}
.periodic-table:before {
display: none !important;
}
}
@media all and (max-width: 750px) {
body {
margin: 2vw;
}
.periodic-table {
grid-template-columns: 1fr 1fr;
}
.periodic-table > li {
height: auto;
font-size: 3vw;
}
}
@media all and (max-width: 550px) {
.periodic-table {
grid-template-columns: 1fr;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment