var elements = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne', 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr', 'Rb', 'Sr', 'Y', 'Zr', 'Nb', 'Mo', 'Tc', 'Ru', 'Rh', 'Pd', 'Ag', 'Cd', 'In', 'Sn', 'Sb', 'Te', 'I', 'Xe', 'Cs', 'Ba', 'La', 'Ce', 'Pr', 'Nd', 'Pm', 'Sm', 'Eu', 'Gd', 'Tb', 'Dy', 'Ho', 'Er', 'Tm', 'Yb', 'Lu', 'Hf', 'Ta', 'W', 'Re', 'Os', 'Ir', 'Pt', 'Au', 'Hg', 'Tl', 'Pb', 'Bi', 'Po', 'At', 'Rn', 'Fr', 'Ra', 'Ac', 'Th', 'Pa', 'U', 'Np', 'Pu', 'Am', 'Cm', 'Bk', 'Cf', 'Es', 'Fm', 'Md', 'No', 'Lr', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og'];
document.querySelector('.wrapper').innerHTML = elements.map(el => '<div class="element">'+el+'</div>').join('');
.wrapper {
display: grid;
grid-template-columns: repeat(18, 1fr);
grid-auto-rows: 1fr;
}
.element {
border: 1px solid #ccc;
margin: 0 -1px -1px 0;
text-align: right;
counter-increment: el;
padding: 3px 2px;
}
/* Helium belongs to the last column, that is, it starts at second-to-last grid line */
.element:nth-child(2) {
grid-column: -2;
}
/* Boron and Aluminim are 3rd group elements, that is, there are 6 columns since them,
so they start at the 7th grid line counting from its end */
.element:nth-child(5),
.element:nth-child(13) {
grid-column: -7;
}
/* similarly, Titanium, and Zirconium, (as well as Hafnium, and Rutherfordium)
start at 16th grid line from the grid end */
.element:nth-child(22),
.element:nth-child(40),
.element:nth-child(72),
.element:nth-child(104) {
grid-column: -16;
}
/* Lanthanide */
.element:nth-child(n + 57):nth-child(-n + 71) {
background-color: pink;
}
.element:nth-child(n + 58):nth-child(-n + 71) {
grid-row: 9;
}
/* Actinide */
.element:nth-child(n + 89):nth-child(-n + 103) {
background-color: yellow;
}
.element:nth-child(n + 90):nth-child(-n + 103) {
grid-row: 10;
}
/* just some decoration :) */
.element::before {
content: counter(el);
font-size: .75em;
text-align: left;
display: block;
color: #888;
}
<div class="wrapper"></div>