Tailwind列布局适配问题求助：NextJS作品集项目卡片异常

放弃columns布局（流式重排特性导致跨列，且Safari兼容性差），改用CSS Grid结合动态最小高度控制，既满足固定列布局，又支持单卡片展开时高度自适应，同时完美兼容Safari。

实现步骤 #

1. 父容器布局设置

用Grid替代columns，响应式定义列数，确保每个卡片占据独立网格单元，彻底避免跨列问题：

<div className="container grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10 justify-self-center self-center">
  {projects.map(project => (
    <ProjectCard key={project.id} project={project} />
  ))}
</div>

2. 卡片组件动态高度控制

卡片默认设置固定最小高度（保证未展开时视觉统一），展开时取消最小高度，让高度自适应内容：

import { useState } from 'react';

const ProjectCard = ({ project }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className={`bg-white rounded-lg shadow-md p-6 transition-all duration-300 ${
      isExpanded ? 'min-h-auto' : 'min-h-[300px]' // 动态切换最小高度
    }`}>
      <h3 className="text-xl font-bold mb-2">{project.title}</h3>
      <p className="text-gray-600 mb-4">{project.shortDesc}</p>
      
      <button 
        onClick={() => setIsExpanded(!isExpanded)}
        className="text-blue-600 hover:text-blue-800 transition-colors"
      >
        {isExpanded ? '收起详情' : '查看详情'}
      </button>

      {isExpanded && (
        <div className="mt-4 pt-4 border-t border-gray-200">
          <p className="text-gray-700 mb-3">{project.fullDesc}</p>
          <div className="flex gap-2">
            {project.tags.map(tag => (
              <span key={tag} className="px-2 py-1 bg-gray-100 rounded-full text-sm">{tag}</span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default ProjectCard;

关键原理说明 #

• Grid布局的独立性：每个卡片占据独立的网格单元格，展开时仅影响自身所在行的高度，不会触发其他卡片的位置重排，彻底解决跨列问题。
• 动态最小高度：min-h-[300px]确保未展开时所有卡片有统一的视觉高度；展开时min-h-auto让卡片高度随内容自适应，避免Grid默认的等高拉伸行为。
• Safari兼容性：CSS Grid在Safari 10.1及以上版本完全支持，Tailwind会自动添加必要的浏览器前缀，无需额外处理。

为什么之前的方案不行？ #

• columns：流式布局特性决定了内容会自动填充空白区域，展开卡片后高度变化必然导致后续内容重排跨列，且Safari对break-inside: avoid-column的支持存在bug。
• 普通Grid/Flex：未设置动态高度时，默认的等高拉伸规则会让所有卡片同步高度，无法实现单卡片的高度独立变化。

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