我試圖用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

空間的出現是因為元素內容仍然占據著你看不見的空間。如果您想刪除按鈕之間的空間，首先顯示內容元素，然后如果活動類被切換，然后添加一些樣式來顯示內容。下面是例子。

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    border-radius: 15px;    
    display: none; <-- new added
}
.active + .content { <-- new added
  display: block;
}

我覺得這個應該可以。