React实现所有行等高：移动端单行卡片高度统一需求求助

我已经实现了同一行内所有列的等高效果，但不知道如何让所有行的卡片都保持相同高度，尤其是在移动端视图（每行仅显示一张卡片）时，所有卡片高度一致。

当前效果：

• 所有行高度不一致：
• 同一行内列已实现等高：

现有代码：

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="row g-3 g-lg-4">
            <>
                {data?.map((item, i) => (
                    <div className="col-sm-6 col-lg-3 d-flex" key={i}>
                        <div className={`card-body offer-item text-center`}>
                            <div className="text-center">
                                <img src={item.slika} alt="" />
                            </div>
                            <h4 className="title">
                                <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                            </h4>
                        </div>
                    </div>
                ))}
            </>
        </div>
    </div>
</div>

解决方案 #

方案1：JS动态计算最大高度

在组件挂载、数据更新或窗口 resize 时，计算所有卡片的最大高度并统一设置：

import { useEffect, useRef } from 'react';

const YourComponent = () => {
    const ponudbaRef = useRef(null);

    useEffect(() => {
        const syncCardHeights = () => {
            if (!ponudbaRef.current) return;
            const cards = ponudbaRef.current.querySelectorAll('.offer-item');
            let maxHeight = 0;

            // 先重置高度，避免缓存影响
            cards.forEach(card => {
                card.style.height = 'auto';
                maxHeight = Math.max(maxHeight, card.offsetHeight);
            });

            // 统一设置最大高度
            cards.forEach(card => {
                card.style.height = `${maxHeight}px`;
            });
        };

        syncCardHeights();
        window.addEventListener('resize', syncCardHeights);
        return () => window.removeEventListener('resize', syncCardHeights);
    }, [data]); // 数据更新时重新计算

    // 原有JSX结构...
};

方案2：CSS Grid替代Bootstrap布局

用Grid布局天然实现所有网格项等高，无需额外JS：

.trending-menu-section .grid-container {
    display: grid;
    gap: 0.75rem 1rem; /* 对应原g-3 g-lg-4的间距，可按需调整 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 自适应列宽，移动端自动单行 */
}

.trending-menu-section .offer-item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 可选：让内容垂直居中 */
}

修改JSX结构：

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="grid-container">
            {data?.map((item, i) => (
                <div key={i}>
                    <div className={`card-body offer-item text-center`}>
                        <div className="text-center">
                            <img src={item.slika} alt="" />
                        </div>
                        <h4 className="title">
                            <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                        </h4>
                    </div>
                </div>
            ))}
        </div>
    </div>
</div>

方案3：Bootstrap配合JS增强

如果想保留Bootstrap的row/col，给卡片容器设置flex属性，再配合方案1的JS同步高度：

.trending-menu-section .row {
    flex-wrap: wrap;
}

.trending-menu-section .col-sm-6.col-lg-3 {
    display: flex;
}

.trending-menu-section .offer-item {
    flex: 1;
    min-height: 100%; /* 确保卡片占满列的高度 */
}

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