如何用Tailwind CSS和Next.js实现响应式图片网格布局并解决显示问题？

我希望使用Tailwind CSS和Next.js编写代码实现如图所示的组件布局：

但我不知道该如何操作。我完全无法将图片排列成网格布局；即便勉强做到，图片也无法正常显示，只能看到alt文本。

以下是我目前的尝试代码：

import Image from 'next/image';
import { WOM_1, WOM_2, WOM_3, WOM_4, WOM_5, WOM_6, WOM_7, WOM_8 } from 'public/images/index.js';

const ImageCard = ({ image, alignment, cardWidth, cardHeight }) => {
    return (
        <div className="flex flex-col items-center justify-center w-full h-full">
            <div className="flex flex-col items-center justify-center">
                {cardWidth && cardHeight ? (
                    <Image
                        src={image}
                        alt=""
                        width={cardWidth}
                        height={cardHeight}
                        layout="fixed"
                        className={`object-cover object-center overflow-hidden`}
                    />
                ) : (
                    <Image
                        src={image}
                        alt=""
                        width={193}
                        height={179}
                        layout="fixed"
                        className={`object-cover object-center `}
                    />
                )}
            </div>
        </div>


    );
};

const WallOfMemories = () => {
    const imageInfo1 = [
        { image: WOM_1, alignment: '0px' },
        { image: WOM_2, alignment: '-20px' },
        { image: WOM_3, cardWidth: '193px', cardHeight: '179px', alignment: '20px' },
        { image: WOM_4, alignment: '-20px' },
    ];
    const imageInfo2 = [
        { image: WOM_5, alignment: '0px' },
        { image: WOM_6, cardWidth: '193px', cardHeight: '179px',alignment: '20px' },
        { image: WOM_7, alignment: '-20px' },
        { image: WOM_8, alignment: '0px' },
    ];
    // display the images in a grid of 4x2 in the center of the page
    return (
        <div className="flex flex-col items-center justify-center w-full h-full">
            <div className="flex flex-row items-center justify-center w-full h-full">
                {imageInfo1.map((image, index) => (
                    <ImageCard
                        key={index}
                        image={image.image}
                        alignment={image.alignment}
                        cardWidth={image.cardWidth}
                        cardHeight={image.cardHeight}
                    />
                ))}
            </div>
            <div className="flex flex-row items-center justify-center w-full h-full">
                {imageInfo2.map((image, index) => (
                    <ImageCard
                        key={index}
                        image={image.image}
                        alignment={image.alignment}
                        cardWidth={image.cardWidth}
                        cardHeight={image.cardHeight}
                    />
                ))}
            </div>
        </div>
    );
};

export default WallOfMemories;

请问我哪里出错了？该如何复现图中的布局？

你的代码存在以下几个核心问题： #

• 布局结构不合理：用两层flex-row模拟4x2网格，无法轻松实现图片上下错落的效果，且外层w-full h-full会导致容器撑满父元素高度，挤压图片空间。
• Next.js Image组件使用错误：
  • layout="fixed"在Next.js 13+已被废弃，会导致渲染异常。
  • 传递的cardWidth和cardHeight是带px的字符串，而Image组件的width/height需要数字类型，这是图片只显示alt文本的关键原因。
• 未利用alignment属性：定义了偏移值但未在组件中应用，无法实现错落布局。

修正后的代码： #

import Image from 'next/image';
import { WOM_1, WOM_2, WOM_3, WOM_4, WOM_5, WOM_6, WOM_7, WOM_8 } from 'public/images/index.js';

const ImageCard = ({ image, offsetY = 0 }) => {
    return (
        {/* 用relative容器实现上下偏移 */}
        <div className="relative" style={{ top: `${offsetY}px` }}>
            {/* 固定尺寸的容器配合fill模式，替代废弃的fixed布局 */}
            <div className="w-[193px] h-[179px] relative overflow-hidden">
                <Image
                    src={image}
                    alt="记忆墙图片"
                    fill
                    className="object-cover object-center"
                />
            </div>
        </div>
    );
};

const WallOfMemories = () => {
    // 统一管理4x2网格的图片和偏移量
    const images = [
        { src: WOM_1, offsetY: 0 },
        { src: WOM_2, offsetY: -20 },
        { src: WOM_3, offsetY: 20 },
        { src: WOM_4, offsetY: -20 },
        { src: WOM_5, offsetY: 0 },
        { src: WOM_6, offsetY: 20 },
        { src: WOM_7, offsetY: -20 },
        { src: WOM_8, offsetY: 0 },
    ];

    return (
        {/* 外层容器确保居中且占满视口高度 */}
        <div className="flex justify-center items-center min-h-screen py-10">
            {/* Grid布局直接实现4列，自动换行 */}
            <div className="grid grid-cols-4 gap-4">
                {images.map((img, index) => (
                    <ImageCard
                        key={index}
                        image={img.src}
                        offsetY={img.offsetY}
                    />
                ))}
            </div>
        </div>
    );
};

export default WallOfMemories;

关键修正说明： #

1. 改用Grid布局：grid-cols-4直接生成4列布局，自动适配2行，gap-4控制图片间距，比flex更适合网格场景。
2. 修复Image组件：使用fill模式配合固定尺寸的相对容器，避免尺寸类型错误，同时替代废弃的layout="fixed"。
3. 实现错落效果：通过style={{ top: ${offsetY}px }}应用上下偏移，对应你原本的alignment需求。
4. 优化容器结构：min-h-screen确保组件占满视口高度，py-10添加上下内边距避免图片贴边。

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