Next.js响应式网格组件重叠问题求助

大屏下product__main内的双列Grid布局正常，但在900px断点切换为单列后，product__main_two会异常覆盖在product__main_one上方。已尝试注释无关代码、替换组件标签、移除父元素relative定位等操作，问题仍存在；仅调换两个子元素位置时布局恢复正常。

页面代码（pages/post/[slug].js） #

import Head from "next/head";
import { useState } from "react";
import styles from "@/styles/product.module.scss";
import db from "@/utils/db";
import Header from "@/components/header";
import News from "@/models/News";
import MiniNews from "@/components/home/mini";
import Category from "@/models/Category";
import MainPost from "@/components/productPage/mainPost";
import ForCategories from "../../components/breakingNews/ForCategories";
import ForCreators from "@/components/breakingNews/ForCreators";

export default function product({ post, related, news, categories }) {
  const [activeImg, setActiveImg] = useState("");
  console.log(post);

  const country = {
    name: "Nigeria",
    flag: "https://cdn.ipregistry.co/flags/emojitwo/ng.svg",
  };
  
  return (
    <>
      <Header country={country} />
      <div className={styles.product}>
        <div className={styles.product__container}>
          <div className={styles.path}>
            Home / {post.category.name} / {post.name}
          </div>
          <MiniNews news={news} />
          <div className={styles.product__main}>
            <div className={styles.product__main_one}>
              <MainPost post={post} />
            </div>
            <div className={styles.product__main_two}>
              <ForCategories
                categories={categories}
                header="All Categories"
                bg="#379237"
              />
              <ForCreators news={news} header="All Categories" bg="#379237" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export async function getServerSideProps(context) {
  try {
    const { params } = context;
    const slug = params.slug;
    await db.connectDb();

    // 获取指定slug的文章
    let post = await News.findOne({ slug })
      .populate({ path: "category", model: Category })
      .lean();
    if (!post) {
      return {
        notFound: true, // 文章不存在返回404
      };
    }

    // 获取所有文章
    let news = await News.find()
      .populate({ path: "category", model: Category })
      .sort({ createdAt: -1 })
      .lean();

    // 获取所有分类
    let categories = await Category.find().sort({ createdAt: -1 }).lean();

    return {
      props: {
        post: JSON.parse(JSON.stringify(post)),
        news: JSON.parse(JSON.stringify(news)),
        categories: JSON.parse(JSON.stringify(categories)),
      },
    };
  } catch (error) {
    console.error("Error fetching post:", error);
    return {
      props: {
        post: null,
        news: null,
        categories: null,
      },
    };
  }
}

SCSS样式代码（product.module.scss） #

.product {
  height: 100%;
  background: #eeeeee;

  &__container {
    padding-top: 1rem;
  }
  
  .path {
    max-width: 95%;
    margin: 0 auto;
    font-size: 10px;
    color: #1e1e1e;
  }
  
  &__main {
    padding: 20px 15px;
    max-width: 95%;
    margin: 0 auto;
    position: relative;
    margin-top: 1rem;
    gap: 1rem;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    
    &_one {
      grid-column: span 9;
      height: 100%;
    }

    &_two {
      grid-column: span 3;
    }
  }
  
  @media (max-width: 900px) {
    &__main {
      grid-template-columns: repeat(1, 1fr);
      padding: 0 5px;
      gap: 0;
    }
  }
}

问题原因与修复方案 #

核心原因 #

product__main_one设置的height: 100%是冲突根源：

• 大屏Grid布局中，父容器product__main高度由内容撑开，height:100%能正常继承父容器高度；
• 切换为单列Grid后，父容器高度未被完全撑开，height:100%会强制product__main_one占满父容器的可用高度，导致后续的product__main_two向上重叠。

修复步骤 #

1. 移除product__main_one的height: 100%属性，让它由内部内容自然撑开高度；
2. （可选）在响应式断点中显式重置子元素的Grid列属性，避免潜在布局冲突；
3. （可选）恢复响应式布局下的gap，提升内容可读性。

修改后的SCSS代码：

.product {
  // 保留原有基础样式
  
  &__main {
    // 保留原有基础样式
    
    &_one {
      grid-column: span 9;
      // 移除 height: 100%;
    }

    &_two {
      grid-column: span 3;
    }
  }
  
  @media (max-width: 900px) {
    &__main {
      grid-template-columns: repeat(1, 1fr);
      padding: 0 5px;
      gap: 1rem; // 恢复间距提升可读性
      
      &_one, &_two {
        grid-column: span 1; // 显式指定单列布局
      }
    }
  }
}

额外验证点 #

• 检查MainPost组件内部是否存在绝对定位或负margin属性，这类属性也可能导致布局重叠；
• 确保父容器product__main未设置固定高度，让它由子元素内容自然撑开。

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