如何用CSS实现Instagram式响应式网格布局：桌面3列移动端单列

核心修改方案 #

原布局未实现要求的3列带间距及响应式切换效果，以下是调整后的完整代码：

HTML（结构保持不变） #

<div class="menu">
  <p data-target="#initial" class="active">Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div class="content">
  <div data-content id="initial"  class="active">
    <div class="cards">
      <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div class="cards">
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div class="cards">
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    </div>
  </div>
</div>

CSS（核心布局调整） #

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Sans-serif;
}
body{
  padding: 5%;
}
.menu{
  display:flex;
}
.menu p{
  margin-right: 2rem;
  cursor: pointer;
  text-transform:uppercase;
}
.content{
  margin-top:2rem;
}
[data-content]{
  display:none;
}
.active[data-content]{
  display:block;
}
.menu .active{
  text-transform:uppercase;
  color:#FFF;
  background: #000;
  padding:  5px 10px;
  margin-top: -5px;
  border-radius: 50px;
}

/* 核心网格布局实现 */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 直接设置10px间距 */
}
.card{
  border: 1px solid #ccc;
  background: #fff;
  padding: 1rem; /* 可选：优化卡片内边距 */
}

/* 移动端响应式切换 */
@media(max-width:768px){
  .cards{
    grid-template-columns: 1fr; /* 切换为单列布局 */
  }
}

JavaScript（无需改动） #

const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');

targets.forEach(target => {
  target.addEventListener('click',()=>{
    const t = document.querySelector(target.dataset.target)
    
    targets.forEach(t => {
      t.classList.remove('active')
    })
    contents.forEach(c => {
      c.classList.remove('active')
    })
    
    t.classList.add('active');
    target.classList.add('active');
  })
})

改动说明 #

1. 用CSS Grid替代原flex布局，grid-template-columns: repeat(3, 1fr)实现等宽3列，gap:10px直接控制网格间距，避免flex布局中margin溢出的问题。
2. 媒体查询中修改grid-template-columns:1fr，一键切换为单列布局，满足移动端需求。
3. 给.card添加内边距优化视觉效果，可根据实际需求调整。

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