Periodic Table
A small periodic-table-style grid where elements are placed by explicit `grid-column` + `grid-row` coordinates and colored by category — the most explicit-coordinates demo in the set.
The code
<div class="gl-pt">
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 1">
<strong>H</strong><em>1 / 1</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 1">
<strong>He</strong><em>8 / 1</em>
</div>
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 2">
<strong>Li</strong><em>1 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 2">
<strong>Be</strong><em>2 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 2">
<strong>C</strong><em>5 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 2">
<strong>N</strong><em>6 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 7; grid-row: 2">
<strong>O</strong><em>7 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 2">
<strong>Ne</strong><em>8 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 3">
<strong>Na</strong><em>1 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 3">
<strong>Mg</strong><em>2 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-met" style="grid-column: 3; grid-row: 3">
<strong>Al</strong><em>3 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-mtl" style="grid-column: 4; grid-row: 3">
<strong>Si</strong><em>4 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 3">
<strong>P</strong><em>5 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 3">
<strong>S</strong><em>6 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-hal" style="grid-column: 7; grid-row: 3">
<strong>Cl</strong><em>7 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 3">
<strong>Ar</strong><em>8 / 3</em>
</div>
</div> <div class="gl-pt">
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 1">
<strong>H</strong><em>1 / 1</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 1">
<strong>He</strong><em>8 / 1</em>
</div>
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 2">
<strong>Li</strong><em>1 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 2">
<strong>Be</strong><em>2 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 2">
<strong>C</strong><em>5 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 2">
<strong>N</strong><em>6 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 7; grid-row: 2">
<strong>O</strong><em>7 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 2">
<strong>Ne</strong><em>8 / 2</em>
</div>
<div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 3">
<strong>Na</strong><em>1 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 3">
<strong>Mg</strong><em>2 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-met" style="grid-column: 3; grid-row: 3">
<strong>Al</strong><em>3 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-mtl" style="grid-column: 4; grid-row: 3">
<strong>Si</strong><em>4 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 3">
<strong>P</strong><em>5 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 3">
<strong>S</strong><em>6 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-hal" style="grid-column: 7; grid-row: 3">
<strong>Cl</strong><em>7 / 3</em>
</div>
<div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 3">
<strong>Ar</strong><em>8 / 3</em>
</div>
</div>.gl-pt {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
width: 100%;
min-height: 480px;
padding: 22px;
background: #0a0a14;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
}
.gl-pt-cell {
border-radius: 8px;
padding: 10px 6px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
min-height: 64px;
}
.gl-pt-cell strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gl-pt-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
opacity: 0.7;
letter-spacing: 0.04em;
}
.gl-pt-alkmet { background: linear-gradient(135deg, #f87171, #ef4444); }
.gl-pt-alkear { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a14; }
.gl-pt-met { background: linear-gradient(135deg, #94a3b8, #64748b); }
.gl-pt-mtl { background: linear-gradient(135deg, #34d399, #10b981); }
.gl-pt-non { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.gl-pt-hal { background: linear-gradient(135deg, #c084fc, #a855f7); }
.gl-pt-noble { background: linear-gradient(135deg, #f472b6, #ec4899); }
@media (max-width: 720px) {
.gl-pt { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
.gl-pt-cell strong { font-size: 18px; }
} .gl-pt {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
width: 100%;
min-height: 480px;
padding: 22px;
background: #0a0a14;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
}
.gl-pt-cell {
border-radius: 8px;
padding: 10px 6px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
min-height: 64px;
}
.gl-pt-cell strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gl-pt-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
opacity: 0.7;
letter-spacing: 0.04em;
}
.gl-pt-alkmet { background: linear-gradient(135deg, #f87171, #ef4444); }
.gl-pt-alkear { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a14; }
.gl-pt-met { background: linear-gradient(135deg, #94a3b8, #64748b); }
.gl-pt-mtl { background: linear-gradient(135deg, #34d399, #10b981); }
.gl-pt-non { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.gl-pt-hal { background: linear-gradient(135deg, #c084fc, #a855f7); }
.gl-pt-noble { background: linear-gradient(135deg, #f472b6, #ec4899); }
@media (max-width: 720px) {
.gl-pt { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
.gl-pt-cell strong { font-size: 18px; }
}