如何创建带图片和底部Collapsible按钮的4×2网格布局

你需要实现4列2行的网格布局，包含8张图片及对应折叠按钮，但当前代码导致所有元素堆叠成单列。

问题根源 #

你的HTML结构存在未闭合标签的错误：每个.grid-item内部的<div class="content">标签没有正确闭合，导致后续的.grid-item被嵌套进前一个网格项中，完全打乱了网格容器的布局逻辑。

修复后的完整代码 #

<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* 网格容器样式 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
}

/* 网格项样式 */
.grid-item {
    display: flex;
    flex-direction: column;
}

/* 图片自适应 */
.grid-item img {
    width: 100%;
    height: auto;
}

/* 折叠按钮样式 */
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-top: 5px;
}

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

/* 折叠按钮的加减符号 */
.collapsible:after {
    content: '+';
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    content: "-";
}

/* 折叠内容样式 */
.content {
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
    display: none;
}

.content.active {
    display: block;
    padding: 18px;
}
</style>

<div class="grid-container">
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Bob, Course Director</button>
        <div class="content">
            <p>Blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Sue, Board Member</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Tim, Instructor</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Jose, Instructor</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Jason, Course Director</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Amy, Board Member</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Gosia, Instructor</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" />
        <button type="button" class="collapsible">Alex, Instructor</button>
        <div class="content">
            <p>blahblah</p>
        </div>
    </div>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        content.classList.toggle("active");
    });
}
</script>

额外优化说明 #

1. 给.grid-item添加display: flex; flex-direction: column;，确保图片、按钮、折叠内容垂直排列且宽度一致
2. 给图片设置width: 100%; height: auto;，让图片自适应网格项宽度，避免溢出
3. 移除了grid-template-rows: repeat(2, 1fr);，让行高自动适应内容，避免折叠内容展开时被裁剪
4. 调整了.content的padding，让展开后的内容排版更美观

内容的提问来源于stack exchange，提问作者Ropolola