我是 HTML、CSS 新手，我一直在努力用图像制作这个负责任的网格。当您将鼠标悬停在它们上方时，会出现文本，但效果很好。问题是，一旦我调整屏幕大小，网格就会保持不变，并且不会缩小以适应。此外，一旦屏幕宽度小于 900 像素，图像就会变得混乱。
\n预先感谢您的提示！
\n\n\n\n
#grid {\n width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-auto-rows: 0.2fr;\n grid-gap: 10px; \n}\n\n.contain {\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n}\n\n#grid img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.description {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n padding: 1rem;\n text-align: left;\n background: rgba(29, 106, 154, 0.72);\n color: #fff;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.4s, …