Как и Солнечная система, Периодическая таблица много раз создавалась с помощью CSS… но никогда еще она не была сделана так просто, как я собираюсь вам показать.

Давайте начнем с базовой семантической разметки:

    H
  

Мы используем упорядоченный список,

, так как это упорядоченная система элементов.

Затем у нас есть тег

1. для каждого элемента и тег .

   Имя элемента представляет собой сокращение слова «аббревиатура», что очень мило.
   — Хейдон Пикеринг.

   Теперь вместо того, чтобы гуглить атомную массу каждого элемента, мы просто просим ChatGPT заполнить остальную часть разметки. Мы также просим его добавить к каждому элементу трехбуквенный класс, указывающий, к какому типу принадлежит элемент, т.е. «благородный газ» (class="nbl") и т. д. — и получаем 118 элементов:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   Пока выглядит не очень хорошо; это просто нумерованный список с сокращениями элементов.
   

   1. H
   2. He
   3. Li
   etc.
   

   Давайте превратим список в сетку 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);
   }
   

   Теперь мы устанавливаем каждый

2. в виде квадратного прямоугольника и создаем внутреннюю сетку для размещения атомного номера вверху слева, массы (массы данных) в правом верхнем углу и тега внизу. :
   

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

   Прежде чем мы увидим, чего мы достигли, давайте попросим ChatGPT добавить несколько цветов к классам «типа элемента», которые он добавил ранее. Теперь мы получаем:

   

   Выглядит великолепно, но не совсем так, как та таблица Менделеева, которую мы учили в школе. Давайте добавим немного магии сетки.

   Для Helium мы хотим, чтобы он был помещен в последний столбец. Поскольку мы знаем, что ширина сетки составляет 18 столбцов, мы просто добавляем:
   

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

   Поскольку это упорядоченный список, значение n-го типа всегда будет соответствовать атомному номеру каждого элемента. Мы хотим переместить Бор и Алюминий в столбец 13:
   

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

   Давайте проверим:

   

   Конечно, улучшение, но поскольку столбец сетки просто сдвигает сетку вперед, как мы можем вывести элементы 58-71 и 90-103 (латениды и актиниды) полностью из их потока сетки и добавить их в эти две строки под основной сеткой?

   Для этого мы можем использовать область сетки, где мы определяем:

   начало строки/начало столбца/конец строки/конец столбца

   В нашем случае это будет:
   

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

   И теперь мы получаем (для ясности я включил сетку-визуализатор Dev Tools'):

   

   Обратите внимание, как элементы сетки после элемента, который мы переместили из потока, продолжают работать в основном потоке!

   ---

   Фильтрация

   Теперь давайте воспользуемся этими классами «типа элемента», которые ChatGPT сгенерировал ранее, для фильтрации периодической таблицы.

   Сначала давайте добавим базовый HTML:
   

   Filter

   Alkali Metals

   Затем мы просим ChatGPT заполнить остальное и добавляем опцию «Все» без идентификатора:

   

   Для фильтрации нам нужен код JavaScript, верно? Нет, мы можем сделать это с помощью простого CSS:
   

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

   Логика работает следующим образом: если тело содержит флажок с id="alk" и он установлен, стили будут применены ко всем элементам

3. , у которых нет . класс общения.

   Повторите для всех типов и классов.

   Давайте нажмем на «металлоиды»:

   

   Насколько это круто?

   ---

   На этом урок заканчивается… но подождите… что делает этот фильтр Гейзенберга? Его не было в списке фильтров ChatGPT?

   Давайте нажмем:

   

   … и теперь вы знаете мое любимое телешоу всех времен!

   Демо

   Вот Codepen — хотя он полностью адаптивный, я рекомендую просматривать его на больших экранах: