媒体查询修改grid-template-columns时网格项消失的原因与修复

问题背景 #

现有两个餐品组件、一个饮食适配列表，使用.grid-2-cols类实现网格布局：

• 桌面端（默认）：两列网格，布局正常
• 移动端（≤36.75em）：改为单列网格后，第二个餐品消失，仅显示第一个餐品和列表，期望呈现3行（餐品1→餐品2→列表）的布局

相关代码 #

餐品组件HTML（共2个）

<div class="meal">
  <img
    src="img/meals/meal-1.jpg"
    alt="first meal"
    class="meal-img"
  />
  <div class="meal-content-box">
    <div class="meal-tags">
      <span class="meal-tag vegeterian">Vegeterian</span>
    </div>
    <p class="meal-title">Japanese Gyozas</p>
    <ul class="meal-attributes">
      <li class="meal-attribute">
        <ion-icon name="flame-outline" class="meal-icon"></ion-icon>
        <p><strong>650</strong> Calories</p>
      </li>
      <li class="meal-attribute">
        <ion-icon
          name="restaurant-outline"
          class="meal-icon"
        ></ion-icon>
        <p>NutriScore &reg; <strong>74</strong></p>
      </li>
      <li class="meal-attribute">
        <ion-icon name="star-outline" class="meal-icon"></ion-icon>
        <p><strong>4.9</strong> rating (537)</p>
      </li>
    </ul>
  </div>
</div>

饮食适配列表HTML

<div class="works-with-list-box">
  <h2 class="heading-third">Works with any diet:</h2>
  <ul class="work-with-ul">
    <li class="work-with-li">
      <ion-icon
        name="checkmark-outline"
        class="work-with-list-icon"
      ></ion-icon>
      <span class="diet-item">Vegetarian </span>
    </li>
    <li class="work-with-li">
      <ion-icon
        name="checkmark-outline"
        class="work-with-list-icon"
      ></ion-icon>
      <span class="diet-item">Vegan </span>
    </li>
    <li class="work-with-li">
      <ion-icon
        name="checkmark-outline"
        class="work-with-list-icon"
      ></ion-icon>
      <span class="diet-item">Pescatarian </span>
    </li>
  </ul>
</div>

网格布局CSS

.grid-2-cols{
  grid-template-columns: 1fr 1fr;
  column-gap: 4.8rem;
  row-gap:6.4rem;
}

@media (max-width: 36.75em) {
  .grid-2-cols{
    grid-template-columns: 1fr;
  }
}

问题原因 #

最常见的触发场景：

• 第二个餐品被设置了固定网格列位置（比如grid-column: 2），桌面两列布局时能正常放置在第二列；但移动端改为单列后，网格仅存在1列，列2不存在，元素被渲染到网格容器外部
• 网格容器同时设置了overflow: hidden，导致容器外的第二个餐品被裁剪隐藏
• 也可能是媒体查询中存在未提供的、隐藏第二个餐品的代码（比如.meal:nth-child(2) { display: none; }）

修复方案 #

方案1：重置固定网格位置属性 #

检查第二个餐品的CSS，若存在强制指定列的属性，在媒体查询中重置：

@media (max-width: 36.75em) {
  .grid-2-cols{
    grid-template-columns: 1fr;
  }
  /* 重置第二个餐品的网格列位置 */
  .grid-2-cols .meal:nth-child(2) {
    grid-column: auto;
  }
}

方案2：取消容器裁剪溢出内容 #

若网格容器设置了overflow: hidden，在移动端调整为不裁剪：

@media (max-width: 36.75em) {
  .grid-2-cols{
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

方案3：移除隐藏元素的代码 #

排查CSS规则，若存在隐藏第二个餐品的代码，删除或在移动端重置：

/* 若存在此类代码，删除或添加以下重置规则 */
@media (max-width: 36.75em) {
  .meal:nth-child(2) {
    display: block;
  }
}

方案4：显式定义网格行（可选） #

为了更精准控制布局，可在移动端显式定义三行：

@media (max-width: 36.75em) {
  .grid-2-cols{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; /* 三行高度自适应内容 */
  }
}

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