如何解决Grid布局中图标与标题间距问题？求响应式方案

需求目标 #

• 黄色小图标与标题紧邻，仅保留少量间距
• 实现全屏幕尺寸的响应式适配
• 缩小按钮并让按钮右侧留有空白

修改后的代码 #

HTML

<div class="recurso">
    <img src="../assets/images/cp/cidade-transp.png" alt="cidade" class="imagem-recurso">
    <div class="conteudo-recurso">
        <div class="titulo-container">
            <img src="../assets/images/cp/slide.png" alt="icone-slide" class="icone-recurso">
            <div class="titulo-recurso">E se for um título mais longo, como será que fica?</div>
        </div>
        <div class="texto-recurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <button class="botao1-recurso"><b>DOWNLOAD LIVRO EM PDF</b></button>
    </div>
</div>

CSS

.recurso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(10px + 2vw);
    margin: 0 10vw;
    align-items: start;
}

.imagem-recurso {
    max-width: 25vw;
    max-height: 40vw;
}

.conteudo-recurso {
    display: flex;
    flex-direction: column;
    gap: calc(8px + 1vw);
}

.titulo-container {
    display: flex;
    align-items: center;
    gap: 8px; /* 图标与标题的间距，可按需调整 */
}

.icone-recurso {
    width: 24px;
    height: 24px;
    min-width: 24px; /* 保证小屏幕下图标不太小 */
}

.titulo-recurso {
    font-family: Martel;
    font-size: clamp(16px, 1.5vw, 24px);
    color: white;
    margin: 0;
}

.texto-recurso {
    font-family: Martel;
    font-size: clamp(12px, 1vw, 16px);
    color: white;
    line-height: 1.5;
}

.botao1-recurso {
    font-family: Martel;
    background-color: #ffc700;
    border: none;
    color: #292929;
    padding: 8px 16px;
    font-size: clamp(14px, 1vw, 18px);
    cursor: pointer;
    align-self: flex-start; /* 让按钮靠左，右侧留空白 */
    white-space: nowrap; /* 防止按钮文字换行 */
}

/* 响应式适配小屏幕 */
@media (max-width: 768px) {
    .recurso {
        grid-template-columns: 1fr;
        margin: 0 5vw;
    }
    .imagem-recurso {
        max-width: 100%;
        max-height: unset;
    }
}

关键修改说明 #

1. 图标标题紧邻：将图标和标题封装在.titulo-container中，用Flex布局实现垂直居中对齐，通过gap精确控制间距，确保两者紧密排列。
2. 响应式适配：
   • 外层Grid布局采用auto 1fr分配空间，左侧图片自适应宽度，右侧内容填充剩余区域；小屏幕下切换为单列布局，避免内容拥挤。
   • 使用clamp()函数设置字体和元素尺寸，实现不同屏幕下的平滑缩放，替代固定值保证适配性。
3. 按钮调整：通过align-self: flex-start让按钮靠左对齐，右侧自然留白；调整内边距和字体大小缩小按钮，white-space: nowrap防止文字换行破坏布局。
4. 结构优化：将右侧内容统一放入.conteudo-recurso容器，用Flex垂直排布，更灵活地控制元素间距。

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