Javascript 网格项目在较小的屏幕上消失

我是一个非常新的开发人员，试图做一个像样的照片画廊式的东西来练习一下。我一直非常依赖CSS网格来进行布局……我对我迄今为止所做的感到非常自豪

我有四张卡片，每张都包含一个图像缩略图、一个标题和一些文本。当用户将鼠标悬停在任何卡上时，他们可以选择“查看”图像，从而显示全屏模式。一切都如我所愿…然而…当我减小屏幕尺寸时，一些卡片最终消失在屏幕外

我对CSS网格非常陌生，我已经尝试了我所知道的一切。请帮我越过终点线

如果只是复制粘贴到codepen.io上的html部分，下面的代码就可以完美地工作

提前感谢您提供的任何帮助

const buttons=document.queryselectoral（'button'）；
const modal=document.querySelector（'.modal'）；
const image=modal.querySelector（'img'）；
按钮。forEach（按钮=>{
按钮。addEventListener（'click'，handleButtonClick）；
});
功能手柄按钮点击（事件）{
const card=event.currentTarget.closest（“.card”）；
const chosenImage=card.querySelector（'img'）.src；
image.src=chosenImage；
modal.classList.add（'open'）；
}
document.addEventListener（'click'，函数（事件）{
const target=event.target；
const isModal=target.classList[0]='modal'；
if（isModal）{
modal.classList.remove（'open'）；
}
});
正文{
保证金：0；
高度：100vh；
显示：网格；
对齐内容：居中对齐；
背景：线性梯度（0度，rgba（130、109、118、1）0%，rgba（172、52、52、1）100%）；
}
.包装纸{
显示：网格；
栅极间距：40px；
证明内容：中心；
网格模板列：重复（自动拟合，300px）；
网格模板行：450px；
网格自动行：450px；
}
.卡片{
边框：实心5px#ac3434；
边界半径：0.8雷姆；
溢出：隐藏；
背景：#3a363670；
显示：网格；
网格间距：4px；
网格模板列：重复（5，1fr）；
网格模板行：重复（8，1fr）；
}
.img包装{
格构柱：2/3跨；
网格行：2/3跨；
显示：网格；
}
.img包装器img{
身高：100%；
宽度：100%；
对象匹配：覆盖；
边框：实心3px#ac3434；
边界半径：50%；
}
.卡体{
网格柱：1/-1；
网格行：5/-1；
填充：0 10px 0；
字体系列：“Ubuntu”，无衬线；
}
.卡体h2{
字体系列：“安东”，无衬线；
}
.卡片覆盖{
网格柱：1/-1；
网格行：1/-1；
背景：#AC347A；
显示：网格；
放置项目：居中；
转化：translateY（100%）；
过渡：0.4s；
}
.卡片：悬停.卡片覆盖{
转化：translateY（0%）；
}
.卡覆盖按钮{
背景：无；
颜色：白色；
文本转换：大写；
位置：相对位置；
底部：78px；
边框：3倍纯色白色；
边界半径：0.4rem；
字体系列：“Ubuntu”，无衬线；
}
.莫代尔{
高度：100vh；
宽度：100vw；
位置：固定；
背景：#0000008f；
显示：网格；
放置项目：居中；
/*使模态在触发之前不可见*/
不透明度：0；
/*使模态不会记录单击
事件*/
指针事件：无；
}
.打开{
/*显示模态参数*/
不透明度：1；
指针事件：全部；
}
.模态内部{
宽度：500px；
}
.模态内模{
宽度：100%；
身高：100%；
对象匹配：包含；
}

阳光墙

我的同僚们都是精英。这是一种铜酸盐分子，它可以在。多洛·阿库萨默斯·康塞库图尔·克利西亚提斯！应得的？

看法➜
装备凯特

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。名副其实的贵族们减去实习费。

看法➜
城市中的Sass

Lorem ipsum dolor sit amet，奉献精英。解释连续性累积是否为合理的腐败，是否为合理的腐败？

看法➜
城市事物

我的同僚们都是精英。你认为自由消费的责任是什么？多洛雷斯，德朗特。

看法➜
您需要在css中使用媒体标签

您的站点没有响应，当您更改屏幕大小时，不会调整组件的大小

您需要在css中使用媒体标签

您的站点没有响应，当您更改屏幕大小时，不会调整组件的大小

问题在于主网格容器上的
对齐内容：居中
。一旦删除该规则，这些项将不再消失。请参阅重复的帖子以获得解释。这就解决了问题！我从主网格容器中删除了align content:center，并使用margin:auto 0 auto将子网格容器居中；问题是主网格容器上的
align content:center
。一旦删除该规则，这些项将不再消失。请参阅重复的帖子以获得解释。这就解决了问题！我从主网格容器中删除了align content:center，并使用margin:auto 0 auto将子网格容器居中；请解释媒体标签如何解决问题。请解释媒体标签如何解决问题。