Tailwind Grid小屏响应式失效，Next.js布局问题求助

问题描述 #

期望通过Tailwind Grid实现响应式卡片网格：

• 大屏（lg）显示4列
• 中屏（md）显示2列
• 小屏（sm）显示1列

目前大屏显示正常，但切换到中小屏时布局无变化，尝试修改className、调整Tailwind断点顺序均未解决。

相关代码 #

Hero组件代码 #

const Hero = () => {
  return (
    <section>
      <div className='flex flex-row justify-between max-w-screen-xl items-center mx-auto p-4'>
        <div className='w-1/2 pt-0'>
          <Image src={Couple_Coder} alt="CodeCouple" className='h-auto'>
          </Image>
        </div>
        <div className='w-1/2 flex flex-col space-y-4 items-center self-center'>
          <div className='h-1/4'>
            <AnimatedText text="Some Text" className='!text-left !text-6xl'/>
            <AnimatedText text="Some Text" className='!text-left !text-6xl'/>
            <AnimatedText text="Some Text" className='!text-left !text-6xl'/>
          </div>
          <div className='mt-10 h-1/4'>
            <p className='my-4 text-base text-center font-medium pb-10'>
              Some Text!!!
            </p>
          </div>  
          <div className='h-1/4 flex flex-row space-x-4 mt-10 mb-8 pt-4 gap-3'>
            <button type='button' className='button-6'>Workshops</button>
            <button type='button' className='button-6 ml-4'>Discord</button>
          </div>
        </div>
      </div>
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-screen-xl gap-4 mx-auto'>
            <div className='col-span-1'>
                <AnimatedText text="Join Our Workshops" />
            </div>
            <div className='flex col-span-1 md:col-span-2  lg:col-span-4 md:justify-between lg:justify-between gap-4'>
                <Card />        
                <Card />
                <Card />
                <Card />
            </div>
        </div>
    </section>
  )
}

RootLayout代码 #

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <div className="overflow-hidden bg-site bg-cover bg-no-repeat bg-white border-gray-200 dark:bg-gray-100">
        </div>
        <Navbar />    
        <main className='app xl:p-24 lg:p-16 md:p-12 sm:p-8 bg-white border-gray-200 dark:bg-gray-100 '>
        
        {children}
      </main>
      </body>
    </html>
  )
}

问题根源 #

核心问题在于卡片被包裹在flex容器内，而非直接作为Grid的子元素：

• 包含<Card />的div设置了col-span-1 md:col-span-2 lg:col-span-4，导致该容器在不同断点下直接占满对应列数
• 容器内部用flex布局横向排列卡片，即使Grid列数变化，flex容器宽度仍占满整行，卡片只会横向排列（违背了Grid实现响应式的初衷）

解决方案 #

修改Grid结构，让<Card />直接作为Grid的子元素，同时调整标题的列跨度适配布局：

const Hero = () => {
  return (
    <section>
      {/* 原有内容保持不变 */}
      <div className='flex flex-row justify-between max-w-screen-xl items-center mx-auto p-4'>
        {/* ... 此处省略原有代码 ... */}
      </div>
      
      {/* 修改后的Grid布局 */}
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-screen-xl gap-4 mx-auto p-4'>
        {/* 标题在所有断点下占满整行 */}
        <div className='col-span-full'>
          <AnimatedText text="Join Our Workshops" />
        </div>
        {/* 每个Card直接作为Grid子元素，自动适配列数 */}
        <Card />        
        <Card />
        <Card />
        <Card />
      </div>
    </section>
  )
}

可选调整（若需标题仅占单列） #

如果希望标题在大屏时占1列，卡片占剩余3列，可调整标题的col-span：

<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-screen-xl gap-4 mx-auto p-4'>
  {/* 标题：小屏/中屏占满整行，大屏占1列 */}
  <div className='col-span-full lg:col-span-1'>
    <AnimatedText text="Join Our Workshops" />
  </div>
  {/* 每个Card：大屏占1列，中屏占1列，小屏占1列 */}
  <Card className='lg:col-span-1 md:col-span-1 col-span-full' />        
  <Card className='lg:col-span-1 md:col-span-1 col-span-full' />
  <Card className='lg:col-span-1 md:col-span-1 col-span-full' />
  <Card className='lg:col-span-1 md:col-span-1 col-span-full' />
</div>

验证效果 #

修改后：

• 小屏（<768px）：1列布局，卡片垂直排列
• 中屏（768px~1023px）：2列布局，每行2张卡片
• 大屏（≥1024px）：4列布局，每行4张卡片

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