Grid Gallery 不适合我的包装容器

问题描述

需要你们的帮助！我有一个由 div 容器包裹的网格库，问题是库超出了容器大小的范围，我无法正确安装它

ProjectPageContainer - 将屏幕分成 2 行， 网格图像的第一宽行 第二个为文字说明

我想使网格画廊适合 ProjectgalleryWrapper，以适应其边界，但我不能！ 请多多指教

我的退货声明：

return (
    <div className='ProjectPageContainer'>
        <div className='ProjectgalleryWrapper'>
                <div className="gallery-grid">
                    {artilleryData.map(renderImageContent)}
                </div>
                <galleryModal
                    closeModal={closeModal}
                    findPrev={findPrev}
                    findNext={findNext}
                    hasPrev={currentIndex > 0}
                    hasNext={currentIndex + 1 < artilleryData.length}
                    src={artilleryData[currentIndex]}
                />
        </div>
        <div className='ProjectPageDescWrapper'>
            <h1 className='DescTitle'> hey wasssup</h1>
            <p className='DescParagraph'>
                Hello my name is Igor and this is my project Hello my name is Igor and this is my project Hello my
                name is Igor and this is my project Hello my name is Igor and this is my project
                Hello my name is Igor and this is my project Hello my name is Igor and this is my project Hello my
                name is Igor and this is my project
            </p>
        </div>
    </div>
)

我的 scss 文件：

.ProjectPageContainer {
 height: 100%;
 width: 100%;
 background: #fff;
 display: grid;
 grid-template-rows:550px 150px;
 }

 .ProjectPageDescWrapper {
 background: #fff;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 }

.DescTitle {
font-size: 22px;
line-height: 1.8;
font-weight: 600;
color: #01bf71;
}

.DescParagraph {
font-size: 17px;
line-height: 1.5;
font-weight: 550;
letter-spacing: 0.2px;
margin: 10px 20px 10px 20px;
color: #000;
}

.ProjectgalleryWrapper {
background: #000;
height: 100%;
width: 100%;
object-fit: contain;
}


.gallery-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 8px;
max-width: 300px;
width: 100%;
height: 100%;
margin: 0 auto;



 img {
 width: 100%;
 height: 100%;
 border: 5px solid #fff;
 }
 }

.gallery-grid div {
//position: relative;
cursor: pointer;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）