Periodic Table — Playground

{CF} CodeFronts Back to CSS Grid Layouts Periodic Table Pure CSS

Edit any tab — preview updates live

.gl-pt {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 36px);
  gap: 3px;
  width: 320px;
  font-family: system-ui, sans-serif;
  color: #fff;
}
.gl-pt-c {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  line-height: 1;
}
.gl-pt-c b {
  font-size: 7.5px;
  font-weight: 500;
  margin-bottom: 1px;
  opacity: 0.8;
}
.gl-pt-h     { background: linear-gradient(135deg, #2eb88a, #3de8aa); }
.gl-pt-noble { background: linear-gradient(135deg, #ff6c8a, #ff9a76); }
.gl-pt-alk   { background: linear-gradient(135deg, #f5a84a, #ffd479); }
.gl-pt-alke  { background: linear-gradient(135deg, #ffd479, #f5a84a); color: #1a1a2e; text-shadow: none; }
.gl-pt-met   { background: linear-gradient(135deg, #7c6cff, #a78bfa); }
.gl-pt-non   { background: linear-gradient(135deg, #3de8f5, #5aa0e0); }
.gl-pt-hal   { background: linear-gradient(135deg, #a78bfa, #cbb8ff); color: #1a1a2e; text-shadow: none; }

Live preview Ready