html - css网格行在使用网格自动行的移动设备上不起作用

Question

我试图让我的布局网格在移动设备上下降到 1 列布局，但是当使用 css 网格时，它会切掉两个偶数 div 元素，并且只显示 4 个 div 中的 2 个。

在桌面上（这很好用）：

在移动设备上，仅显示 4 个紫色、棕色和蓝色 div 中的两个：

标记：

    import Image from 'next/image';


const TextBlockImages = ({ componentData }) => {
    return (
        <div className="text-block-wrapper">
            <div className="text-block-main-container">
                <div className="title-container">
                    <span>Park Stories</span>
                </div>
                <div className="block-container">
                    <div className="image-container">
                        <Image
                            className="image-container-image"
                            src="/images/test.jpg"
                            alt="Picture of the author"
                            layout='fill'
                        />
                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">
                            <span>here is a title</span>
                        </div>
                        <div className="overlay-block-sub-title"> 
                            <div>
                                <span>here is a sub title</span>
                            </div>                                       
                            <div className="overlay-description">
                                <span>here is a description</span>
                            </div>
                        </div>
                        <div className="overlay-block-link">
                            <span>READ MORE</span>
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">
                        <Image
                            className="image-container-image"
                            src="/images/test.jpg"
                            alt="Picture of the author"
                            layout='fill'
                        />
                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">
                        <Image
                            className="image-container-image"
                            src="/images/test.jpg"
                            alt="Picture of the author"
                            layout='fill'
                        />
                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">
                        <Image
                            className="image-container-image"
                            src="/images/test.jpg"
                            alt="Picture of the author"
                            layout='fill'
                        />
                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TextBlockImages;

的CSS：

.text-block-wrapper {
    width: 100%;
    height: 1701px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:5%;
    margin-bottom: 5%;
    @media (max-width: 1199.98px) { 
        height: 1300px;
    }
    @media (max-width: 767.98px) { 
        height: 1700px;
    }

}

.text-block-main-container {
    height:100%;
    width: 90%;
    max-width: 1472px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @media (max-width: 767.98px) { 
        grid-template-columns:1fr;
        grid-auto-rows:1fr ;
        
    } 
    grid-auto-rows: 1fr 5fr 5fr;
    gap: 10px;
}

.title-container {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: pink;
}

.block-container {
    background-color: blue;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows:1fr;
}

.image-container {
    background-color: blueviolet;
}

.overlay-block-container {
    background-color: brown;
    width: 90%;
    max-width: 641px;
    justify-self: center;
    transform: translateY(-40%);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr, 1fr, 1fr;
}

.overlay-block-title {
    font-size: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.overlay-block-sub-title {
    font-size:28px;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    justify-content: center;
}

.overlay-block-sub-title > div {
    display: flex;
    width: 100%;
    justify-content: center;
}

.overlay-description {
    margin-top: -50px;
    font-size: 18px;
}

.overlay-block-link {
    display: flex;
    justify-content: center;
}

.overlay-block-text {
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

我的预期结果是所有这些都显示在移动设备上的 1 列布局中，粉色 div 的视口高度比其他 div 低

标签： htmlcsssasscss-grid