css自适应网格gap间距设置技巧

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; /* 行与列的间距均为16px */
}

gap: 16px 24px; /* row-gap 为 16px，column-gap 为 24px */
</font><H3><strong>使用相对单位增强自适应能力</strong></H3><p>为了使<code>gap</code>在不同设备上表现一致，建议避免固定使用<code>px</code>，转而采用相对单位。</p><ul><li><strong>em/rem</strong>：基于字体大小，适合内容区域随字号变化的场景</li><li><strong>%</strong>：相对于容器宽度，适合流式布局</li><li><strong>vw/vh</strong>：视窗单位，适合全屏或大范围响应式结构</li></ul><p>例如：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1169">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680099816784.png" alt="美间AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1169">美间AI</a>
                            <p>美间AI：让设计更简单</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="美间AI">
                                <span>45</span>
                            </div>
                        </div>
                        <a href="/ai/1169" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="美间AI">
                        </a>
                    </div>
                <font face="Courier New"><pre class="brush:php;toolbar:false;">
.container {
  gap: 1rem; /* 随根字体变化，适配移动端缩放 */
}
@media (max-width: 768px) {
  .container {
    gap: 0.5rem; /* 小屏缩小间距 */
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(12px, 2%, 20px); /* 响应式动态间距 */
}

.item {
  margin-bottom: 16px;
  margin-right: 16px;
}
/* 最后一行/列需清除多余margin */