我试图得到一个可扩展的按钮，以适应一个网格使用HTML和CSS，但他们将不适合正确。我对HTML和CSS还很陌生，所以我不确定我到底做错了什么。我有一个按钮风格，我喜欢，但我不能为我的生活让他们整齐地融入一个网格。
[捆绑以消除按钮之间的空格][1]

<style>
    .grid-container {
        display: grid;
        grid-template: auto / auto auto auto auto;
        background-color: gray;
        padding: 10px;
    }
    
    .collapsible {
        background-color: #f1f1f1;
        gap: 15px
        cursor: pointer;
        padding: 18px;
        Border-radius: 15px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .active, .collapsible:hover {
        background-color: #555;
    }

    .collapsible:after {
        content: '\002B';
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
        border-radius: 15px;    
    }
    </style> 

    <div class= "grid-container">
    <button class="collapsible">Open Collapsible</button>
        <div class="content">
            <p> Test </p>
        </div>
    <button class="collapsible">Open Collapsible</button>
        <div class="content">
            <p> Test </p>
        </div> 
    </div>

    <script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

   for (i = 0; i < coll.length; i++) {
       coll[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var content = this.nextElementSibling;
       if (content.style.maxHeight){
           content.style.maxHeight = null;
       } else {
           content.style.maxHeight = content.scrollHeight + "px";
           } 
       });
    }
    </script>

  [1]: https://i.stack.imgur.com/djtYl.png