如何用Media Query解决figcaption与图片错位的布局问题？

你的问题根源在于HTML结构未将图片和对应标题绑定为独立单元，移动端切换flex布局时，所有图片会先占据空间，之后才排列所有标题，自然无法一一对应。以下是具体修复方案：

步骤1：重构HTML结构 #

把每张图片和它的figcaption包裹进同一个容器（比如.grid-item），让二者成为不可拆分的整体：

<div class="titolo-grid">
    <h2>In evidenza</h2>
</div>

<div class="grid-container">
    <div class="grid">
        <div class="grid-item">
            <img src="1w.webp" class="img"/>
            <figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
        </div>
        <div class="grid-item">
            <img src="2w.webp" class="img"/>
            <figcaption class="caption">Maglieria</figcaption>
        </div>
        <div class="grid-item">
            <img src="3w.webp" class="img"/>
            <figcaption class="caption">Scarpe Made In Italy</figcaption>
        </div>
    </div>
</div>

步骤2：调整CSS样式 #

保留桌面端grid布局逻辑，移动端flex布局时，让每个.grid-item作为独立flex项，自动换行并保持内部图片与标题的上下结构：

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 200px;
    grid-gap: 20px;
    justify-content: center;
    align-content: center; 
}

/* 给每个网格项内部添加间距，分离图片和标题 */
.grid-item {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 可根据需求调整间距 */
}

@media (max-width: 768px) {
    /* navbar 样式保留 */
    * {
        margin: 0;
        box-sizing: border-box;
    }

    .nav-links, .search {
        display: none;
    }

    .logo {
        height: 64px;
        width: 126px;
        filter: invert(100%);
        padding: 1px;
    }

    /* 移动端grid切换为flex布局 */
    .grid {
        display: flex;
        flex-wrap: wrap;
        margin-top: 100px;
        gap: 20px; /* 替换grid-gap为通用gap属性 */
    }

    /* 移动端每个网格项占50%宽度（一行2个），可改为100%实现一行1个 */
    .grid-item {
        width: calc(50% - 10px); /* 减去gap的一半，避免换行时间距溢出 */
    }
}

关键说明 #

• 用.grid-item绑定图片和标题，确保布局时二者始终关联；
• 移动端通过flex-wrap: wrap让网格项自动换行，设置宽度控制每行显示数量；
• 使用通用gap属性替代grid-gap，同时支持grid和flex布局，减少代码冗余。

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