创建类Instagram个人主页：3列响应式grid布局与导航Tab active类修复

一、响应式卡片Grid布局实现 #

用CSS Grid就能快速实现需求，核心是结合grid-template-columns和媒体查询，搭配gap控制间距：

/* 全局盒模型重置，避免间距计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-container {
  /* 桌面端自动分成3等宽列 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 卡片之间的行列间距 */
  gap: 10px;
  /* 容器内边距，避免卡片贴紧屏幕边缘 */
  padding: 10px;
}

.card {
  /* 基础卡片样式，可按需调整 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 移动端适配（宽度≤250px） */
@media (max-width: 250px) {
  .card-container {
    /* 切换为单列自适应布局 */
    grid-template-columns: 1fr;
    padding: 5px;
  }
}

说明：

• repeat(3, 1fr)让桌面端3列自动均分可用空间，无需手动计算宽度
• gap: 10px直接设置卡片间的间距，比用margin更简洁且不会出现边距叠加问题
• 媒体查询中修改grid-template-columns为1fr，自动切换为单列布局

二、Tab导航active类切换修复 #

点击新Tab时原Tab的active类未移除，本质是没先统一清空所有Tab的active状态，再给当前Tab添加。以下是原生JS解决方案：

HTML结构示例 #

<div class="tab-nav">
  <button class="tab-btn active">动态</button>
  <button class="tab-btn">收藏</button>
  <button class="tab-btn">存档</button>
</div>

JavaScript代码 #

// 获取所有Tab按钮元素
const tabBtns = document.querySelectorAll('.tab-btn');

// 给每个按钮绑定点击事件
tabBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 先移除所有按钮的active类
    tabBtns.forEach(item => item.classList.remove('active'));
    // 给当前点击的按钮添加active类
    this.classList.add('active');
    
    // 此处可添加Tab内容切换逻辑，比如显示对应内容区块
  });
});

如果项目使用jQuery，代码可简化为：

$('.tab-btn').click(function() {
  $('.tab-btn').removeClass('active');
  $(this).addClass('active');
});

核心逻辑：每次点击时先遍历所有Tab按钮，移除它们的active类，再给当前点击的按钮添加，确保同一时间只有一个Tab处于激活状态。

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