Assim como o Sistema Solar, A Tabela Periódica foi feita em CSS muitas vezes… mas nunca foi feita de forma tão simples, como estou prestes a mostrar a vocês.

Vamos começar com alguma marcação semântica básica:

    H
  

Usamos uma lista ordenada,

, pois este é um sistema ordenado de elementos.

Temos então uma tag

1. para cada elemento e uma tag .

   O nome do elemento é uma abreviatura da palavra “abreviação”, o que é fofo.
   -Heydon Pickering.

   Agora, em vez de pesquisar no Google a massa atômica de cada elemento, apenas pedimos ao ChatGPT para preencher o restante da marcação. Também pedimos para adicionar uma classe de 3 letras a cada elemento, indicando qual tipo o elemento é, ou seja. um "gás nobre" (class = "nbl") etc. - e obtemos 118 elementos:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   Ainda não parece ótimo; é apenas uma lista numerada com abreviações para os elementos.
   

   1. H
   2. He
   3. Li
   etc.
   

   Vamos transformar a lista em uma grade 18x10:
   

   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);
   }
   

   Agora, definimos cada

2. como uma caixa quadrada e criamos uma grade interna para colocar o número atômico no canto superior esquerdo, a massa (massa de dados) no canto superior direito e a tag abaixo :
   

   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;
     }
   }
   

   Antes de vermos o que realizamos, vamos pedir ao ChatGPT para adicionar algumas cores às classes de "tipo de elemento" adicionadas anteriormente. Agora temos:

   

   Parece ótimo, mas não exatamente como a tabela periódica que aprendemos na escola. Vamos adicionar um pouco de magia de grade.

   Para Helium, queremos que ele seja empurrado para a última coluna. Como sabemos que a grade tem 18 colunas de largura, simplesmente adicionamos:
   

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

   Como esta é uma lista ordenada, o enésimo valor do tipo sempre corresponderá ao número atômico de cada elemento. Queremos mover Boro e Alumínio para a coluna 13:
   

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

   Vamos dar uma olhada:

   

   Uma melhoria, com certeza, mas como a coluna da grade apenas empurra a grade para frente, como podemos tirar os elementos 58-71 e 90-103 (os latenídeos e actinídeos) completamente fora de seu fluxo de grade e adicione-os às 2 linhas abaixo da grade principal?

   Para isso, podemos usar grid-area, onde definimos:

   início de linha / início de coluna / fim de linha / fim de coluna

   No nosso caso, será:
   

   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. */
   }
   

   E agora temos (para maior clareza, habilitei o visualizador de grade das Dev Tools'):

   

   Observe como os elementos da grade após o elemento que removemos do fluxo, continuam no fluxo principal!

   ---

   Filtragem

   Agora, vamos usar essas classes de "tipo de elemento", que geramos o ChatGPT anteriormente, para filtrar a tabela periódica.

   Primeiro, vamos adicionar um pouco de HTML básico:
   

   Filter

   Alkali Metals

   Em seguida, pedimos ao chatGPT para preencher o restante e adicionar uma opção "Todos" sem id:

   

   Precisamos de muito JavaScript para filtrar, certo? Não, podemos fazer isso em CSS simples:
   

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

   A lógica funciona assim: Se o corpo contiver uma caixa de seleção com o id="alk" e estiver marcada, os estilos serão aplicados a todos os elementos

3. que não possuam o . aula alk.

   Repita para todos os tipos e classes.

   Vamos clicar em "metalóides":

   

   Isso é legal?

   ---

   Isso conclui este tutorial… mas espere… o que esse filtro Heisenberg faz? Não estava na lista de filtros do ChatGPT?

   Vamos clicar:

   

   … e agora você conhece meu programa de TV favorito de todos os tempos!

   Demonstração

   Aqui está um Codepen — embora seja totalmente responsivo, recomendo visualizá-lo em telas maiores: