Раскрывающийся список в Gridview с использованием только HTML, CSS или Javascript

Question

Я сделал выпадающий список из тега выбора, но его содержимое слишком много, поэтому выпадающее окно очень длинное, что делает его беспорядочным. Как организовать раскрывающееся содержимое в виде сетки без использования ASP.NET?

Я просматривал Интернет о связанных проблемах, но, похоже, все они используют ASP.NET

Вот это HTML :

<div id = "textarea-container">
      <textarea id="message" placeholder="Write your message here..." required autofocus readonly></textarea>
      <input name="idValue" id="idValue" type="hidden">
      <select id = "emoji-button" style = 'background: url(icons/smiley-icon.png);width:35px;height:35px;' onchange="document.getElementById('message').value=document.getElementById('message').value + this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;"></select>
</div>

JavaScript :

//Emoji messages
var selectEmoji = document.getElementById('emoji-button')
var emojiOption;
var emojRange = [128513, 128591]; //Array of emojis

for (var x = emojRange[0]; x < emojRange[1]; x++) {
    emojiOption = document.createElement('option');
    emojiOption.value = x;
    emojiOption.innerHTML = "&#" + x + ";";
    selectEmoji.appendChild(emojiOption);
}

CSS

/** Emoji Button **/
#emoji-button {
    position: absolute;
    bottom: 40px;
    right: 20px;
    font-size: 0;
}

/** Dropdown for emoji button **/
select {
    padding:3px;
    margin: 0;
    background: transparent;
    color:#888;
    border: none !important;;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}