Al igual que el Sistema Solar, La Tabla Periódica se ha hecho en CSS muchas veces... pero nunca se ha hecho de manera tan simple, como estoy a punto de mostrarles.

Comencemos con algunas marcas semánticas básicas:

    H
  

Usamos una lista ordenada,

, ya que este es un sistema ordenado de elementos.

Luego tenemos una etiqueta

1. para cada elemento y una etiqueta .

   El nombre del elemento es una abreviatura de la palabra “abreviación”, lo cual es lindo.
   —Heydon Pickering.

   Ahora, en lugar de buscar en Google la masa atómica de cada elemento, simplemente le pedimos a ChatGPT que complete el resto del marcado. También le pedimos que agregue una clase de 3 letras a cada elemento, indicando qué tipo es el elemento, es decir. un "gas noble" (class="nbl"), etc. — y obtenemos 118 elementos:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   No se ve muy bien todavía; es solo una lista numerada con abreviaturas de los elementos.
   

   1. H
   2. He
   3. Li
   etc.
   

   Convirtamos la lista en una cuadrícula de 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);
   }
   

   Ahora, configuramos cada

2. para que sea un cuadro cuadrado y creamos una cuadrícula interna para colocar el número atómico en la parte superior izquierda, la masa (data-mass) en la parte superior derecha y la etiqueta debajo. :
   

   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 ver lo que hemos logrado, pidamos a ChatGPT que agregue algunos colores a las clases de "tipo de elemento" que agregó anteriormente. Ahora obtenemos:

   

   Se ve genial, pero no exactamente como la tabla periódica que aprendimos en la escuela. Agreguemos algo de magia en la cuadrícula.

   Para Helio, queremos que se envíe a la última columna. Como sabemos que la cuadrícula tiene 18 columnas de ancho, simplemente agregamos:
   

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

   Dado que se trata de una lista ordenada, el valor enésimo de tipo siempre corresponderá al número atómico de cada elemento. Queremos mover Boro y Aluminio a la columna 13:
   

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

   Veámoslo:

   

   Una mejora, sin duda, pero dado que la columna de cuadrícula simplemente empuja la cuadrícula hacia adelante, ¿cómo podemos sacar los elementos 58-71 y 90-103 (los laténuros y actínidos) completamente fuera de su flujo de cuadrícula y agregarlos a esas 2 filas debajo de la cuadrícula principal?

   Para eso, podemos usar grid-area, donde definimos:

   inicio de fila/inicio de columna/fin de fila/fin de columna

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

   Y ahora obtenemos (para mayor claridad, he habilitado el visualizador de cuadrícula de Dev Tools:

   

   Observe cómo los elementos de la cuadrícula después del elemento que hemos movido fuera del flujo, ¡continúan en el flujo principal!

   ---

   Filtración

   Ahora, usemos estas clases de "tipo de elemento", que ChatGPT generó anteriormente, para filtrar la tabla periódica.

   Primero, agreguemos algo de HTML básico:
   

   Filter

   Alkali Metals

   Luego, le pedimos a chatGPT que complete el resto y agregue una opción "Todos" sin identificación:

   

   Necesitamos un montón de JavaScript para filtrar, ¿verdad? No, podemos hacer esto en CSS simple:
   

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

   La lógica funciona así: si el cuerpo contiene una casilla de verificación con id="alk" y está marcada, los estilos se aplicarán a todos los elementos

3. que no tengan la extensión . clase alk.

   Repetir para todos los tipos y clases.

   Hagamos clic en "metaloides":

   

   ¿Qué tan genial es eso?

   ---

   Con esto concluye este tutorial... pero espera... ¿qué hace ese filtro Heisenberg? ¿No estaba en la lista de filtros de ChatGPT?

   Hagamos clic en él:

   

   … ¡y ahora ya conoces mi programa de televisión favorito de todos los tiempos!

   Manifestación

   Aquí hay un Codepen; aunque responde completamente, recomiendo verlo en pantallas más grandes: