CSS Grid无法正常显示多列布局问题求助

问题根因 #

你当前的CSS Grid布局存在逻辑层级错配：

• 你给.popularContainer设置了display:grid，但它的直接子元素只有1个.popularContent，Grid布局只会对直接子元素生效，因此永远只会生成单列布局，内部的6个卡片元素不会被Grid规则管控。
• 额外优化点：6个卡片的样式完全重复，不需要单独写类，共用同一个类即可减少冗余代码。

修正方案 #

方案1（推荐：优化冗余代码） #

HTML调整

去掉多余的.popularContent包裹层，直接把6个卡片作为.popularContainer的直接子元素，同时给卡片共用同一个类名减少冗余：

<div class="popularContainer">
  <div class="content-card"> 
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div> 
  <div class="content-card"> 
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div>      
  <div class="content-card"> 
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div>   
  <div class="content-card">   
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div> 
  <div class="content-card"> 
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div> 
  <div class="content-card"> 
    <div class="card-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi inventore illum voluptatem quod necessitatibus voluptatum incidunt vero aperiam. Iste, voluptas.</p>
    </div>
  </div> 
</div>

CSS调整

删除6个重复的卡片类样式，统一用共用类控制，原grid规则保留即可生效：

.popularContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto));
  grid-auto-rows: 300px;
  gap: 75px 50px;
  justify-content: center;
}

.content-card { 
  width: 100%;
  height: 100%;
  border-radius: 5px;
  perspective: 1000px;
  background-color: #30475E;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

方案2（不调整HTML结构） #

直接把原.popularContainer的Grid布局规则迁移到.popularContent上，即可直接生效。

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