now try to align that all database through grid somehow by using their distinct class names and IDs. outshow full in one html code.


```
        const svgCharacters = {
            A: `<svg class="svgAz" id="A" width="18" height="18"><text>A</text></svg>`,
            B: `<svg class="svgAz" id="B" width="18" height="18"><text>B</text></svg>`,
            C: `<svg class="svgAz" id="C" width="18" height="18"><text>C</text></svg>`,
            D: `<svg class="svgAz" id="D" width="18" height="18"><text>D</text></svg>`,
            E: `<svg class="svgAz" id="E" width="18" height="18"><text>E</text></svg>`,
            F: `<svg class="svgAz" id="F" width="18" height="18"><text>F</text></svg>`,
            G: `<svg class="svgAz" id="G" width="18" height="18"><text>G</text></svg>`,
            H: `<svg class="svgAz" id="H" width="18" height="18"><text>H</text></svg>`,
            I: `<svg class="svgAz" id="I" width="18" height="18"><text>I</text></svg>`,
            J: `<svg class="svgAz" id="J" width="18" height="18"><text>J</text></svg>`,
            K: `<svg class="svgAz" id="K" width="18" height="18"><text>K</text></svg>`,
            L: `<svg class="svgAz" id="L" width="18" height="18"><text>L</text></svg>`,
            M: `<svg class="svgAz" id="M" width="18" height="18"><text>M</text></svg>`,
            N: `<svg class="svgAz" id="N" width="18" height="18"><text>N</text></svg>`,
            O: `<svg class="svgAz" id="O" width="18" height="18"><text>O</text></svg>`,
            P: `<svg class="svgAz" id="P" width="18" height="18"><text>P</text></svg>`,
            Q: `<svg class="svgAz" id="Q" width="18" height="18"><text>Q</text></svg>`,
            R: `<svg class="svgAz" id="R" width="18" height="18"><text>R</text></svg>`,
            S: `<svg class="svgAz" id="S" width="18" height="18"><text>S</text></svg>`,
            T: `<svg class="svgAz" id="T" width="18" height="18"><text>T</text></svg>`,
            U: `<svg class="svgAz" id="U" width="18" height="18"><text>U</text></svg>`,
            V: `<svg class="svgAz" id="V" width="18" height="18"><text>V</text></svg>`,
            W: `<svg class="svgAz" id="W" width="18" height="18"><text>W</text></svg>`,
            X: `<svg class="svgAz" id="X" width="18" height="18"><text>X</text></svg>`,
            Y: `<svg class="svgAz" id="Y" width="18" height="18"><text>Y</text></svg>`,
            Z: `<svg class="svgAz" id="Z" width="18" height="18"><text>Z</text></svg>`,
            
            a: `<svg class="svgAz" id="a" width="18" height="18"><text>a</text></svg>`,
            b: `<svg class="svgAz" id="b" width="18" height="18"><text>b</text></svg>`,
            c: `<svg class="svgAz" id="c" width="18" height="18"><text>c</text></svg>`,
            d: `<svg class="svgAz" id="d" width="18" height="18"><text>d</text></svg>`,
            e: `<svg class="svgAz" id="e" width="18" height="18"><text>e</text></svg>`,
            f: `<svg class="svgAz" id="f" width="18" height="18"><text>f</text></svg>`,
            g: `<svg class="svgAz" id="g" width="18" height="18"><text>g</text></svg>`,
            h: `<svg class="svgAz" id="h" width="18" height="18"><text>h</text></svg>`,
            i: `<svg class="svgAz" id="i" width="18" height="18"><text>i</text></svg>`,
            j: `<svg class="svgAz" id="j" width="18" height="18"><text>j</text></svg>`,
            k: `<svg class="svgAz" id="k" width="18" height="18"><text>k</text></svg>`,
            l: `<svg class="svgAz" id="l" width="18" height="18"><text>l</text></svg>`,
            m: `<svg class="svgAz" id="m" width="18" height="18"><text>m</text></svg>`,
            n: `<svg class="svgAz" id="n" width="18" height="18"><text>n</text></svg>`,
            o: `<svg class="svgAz" id="o" width="18" height="18"><text>o</text></svg>`,
            p: `<svg class="svgAz" id="p" width="18" height="18"><text>p</text></svg>`,
            q: `<svg class="svgAz" id="q" width="18" height="18"><text>q</text></svg>`,
            r: `<svg class="svgAz" id="r" width="18" height="18"><text>r</text></svg>`,
            s: `<svg class="svgAz" id="s" width="18" height="18"><text>s</text></svg>`,
            t: `<svg class="svgAz" id="t" width="18" height="18"><text>t</text></svg>`,
            u: `<svg class="svgAz" id="u" width="18" height="18"><text>u</text></svg>`,
            v: `<svg class="svgAz" id="v" width="18" height="18"><text>v</text></svg>`,
            w: `<svg class="svgAz" id="w" width="18" height="18"><text>w</text></svg>`,
            x: `<svg class="svgAz" id="x" width="18" height="18"><text>x</text></svg>`,
            y: `<svg class="svgAz" id="y" width="18" height="18"><text>y</text></svg>`,
            z: `<svg class="svgAz" id="z" width="18" height="18"><text>z</text></svg>`,
            
            '0': `<svg class="svg09" id="0" width="18" height="18"><text>0</text></svg>`,
            '1': `<svg class="svg09" id="1" width="18" height="18"><text>1</text></svg>`,
            '2': `<svg class="svg09" id="2" width="18" height="18"><text>2</text></svg>`,
            '3': `<svg class="svg09" id="3" width="18" height="18"><text>3</text></svg>`,
            '4': `<svg class="svg09" id="4" width="18" height="18"><text>4</text></svg>`,
            '5': `<svg class="svg09" id="5" width="18" height="18"><text>5</text></svg>`,
            '6': `<svg class="svg09" id="6" width="18" height="18"><text>6</text></svg>`,
            '7': `<svg class="svg09" id="7" width="18" height="18"><text>7</text></svg>`,
            '8': `<svg class="svg09" id="8" width="18" height="18"><text>8</text></svg>`,
            '9': `<svg class="svg09" id="9" width="18" height="18"><text>9</text></svg>`,

```