I’m trying to get an expanding grid with html and CSS but they just wont fit

I’m trying to get an expandable button to fit into a grid using HTML and CSS but they will not fit properly. I am still fairly new to HTML and CSS so I’m not sure exactly what I am doing wrong. I have a button style I like but I can not for the life of me get them to fit neatly into a grid.

[tying to get rid of the spaces between the buttons][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: '02B';
        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