Grid Gallery 不适合我的包装容器

如何解决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;
}