我有兩個食物描述框:

<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>

這份名單

<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>

默認情況下，我為他們準(zhǔn)備了這個網(wǎng)格

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
}
}

第二頓飯就像這張照片一樣被刪除或隱藏了 正常電網(wǎng)沒有問題 第二餐被刪除

有人能解釋為什么會這樣嗎？我該怎么解決呢

我試圖改變網(wǎng)格-模板-列，并期待一個3行網(wǎng)格的2餐和一個列表，但只得到1餐和一個列表(其中一餐被刪除)

我建議將兩張飯卡包裝在一個貼有網(wǎng)格的容器中。然后用。在另一個容器中使用列表框。大概是這樣的:

section {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}

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

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

<section>
  <div class="meals">
    <div class="meal">
      <h2>Meal #1</h2>
      <p>This is meal one</p>
    </div>
    <div class="meal">
      <h2>Meal #1</h2>
      <p>This is meal one</p>
    </div>
  </div>
  <div class="works-with">
    <h2 class="heading-third">Works with any diet:</h2>
    <ul>
      <li>Vegetarian</li>
      <li>Vegan</li>
      <li>Pescatarian</li>
    </ul>
  </div>
</section>