CSS网格不适应屏幕的宽度

Question

我是 HTML、CSS 的新手，我一直在努力用图像制作这个负责任的网格。当您将鼠标悬停在它们上方时，会出现文本，但效果很好。问题是，一旦我调整了屏幕的大小，网格就会保持不变，不会缩小以适应屏幕大小。此外，一旦屏幕宽度小于 900 像素，图像就会变乱。

提前感谢您的提示!

full screen screenshot

when the screen is smaller

under 900px screen width

#grid {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 0.2fr;
    grid-gap: 10px; 
}

.contain {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
}

#grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.description {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 1rem;
    text-align: left;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s, visibility 0.4s;
}

.contain:hover .description {
     visibility: visible;
  opacity: 1;
}
    
#grid > div:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#grid > div:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

#grid > div:nth-child(3) {
    grid-column: 4 / 5;
    grid-row: 1 / 2; 
}

#grid > div:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

#grid > div:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

#grid > div:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
}


#grid > div:nth-child(7) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

#grid > div:nth-child(8) {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

@media (max-width: 900px) {

#grid {
    grid-template-columns: repeat(2, 1fr);
}

#grid div:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#grid div:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}
#grid div:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
}
#grid div:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
#grid div:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
#grid div:nth-child(6) {
    grid-column: 1 / 2;
    grid-row: 4 / 6;
}
#grid div:nth-child(7) {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
}
#grid div:nth-child(8) {
    grid-column: 2 / 4;
    grid-row: 5 / 6;
}
}

<div id="grid">
  <div class="contain">

    <img src="media/perspective.jpg">
    <p class="description">Every element of an image influences how your audience feels about your subject. This includes using angles to establish different moods. Just by changing your camera position, you can affect how people perceive your photo.</p>
  </div>
  <div class="contain">
    <img src="media/thirds.jpg">
    <p class="description">The rule of thirds is based on the idea that pictures are generally more interesting and well balanced when they aren’t centred. Imagine a grid placed over your images with two vertical lines and two horizontal lines that divide the picture into nine equal sections.</p>
  </div>
  <div class="contain">
    <img src="media/eyes.jpg">
    <p class="description">When shooting portraits, you’ll be focusing on a very small area so it will be more important than ever that you get a nice sharp image. The eyes in particular are an important facial feature, and they’re often the first thing people look at, especially when it comes to close-ups and headshots.</p>
  </div>
  <div class="contain">
    <img src="media/background.jpg">
    <p class="description">Generally speaking, the background should be as simple and clutter free as possible so that it doesn’t pull the viewer’s attention away from the main subject of the photo. Muted colours and plain patterns tend to work well, because you don’t want viewers to end up being more interested in the colourful building or church tower in the background than your model.</p>
  </div>
  <div class="contain">
    <img src="media/selective.jpg">
    <p class="description">It’s important to realise that every photographer, no matter how experienced or talented, gets some mediocre shots. The reason that their portfolios are so impressive, however, is that they only display their best work; they don’t bore you with ten photos of a nearly identical scene.</p>
  </div>
  <div class="contain">
    <img src="media/sunset.jpg">
    <p class="description">Lighting can make or break a photo, and the early morning and evening are widely thought to be the best times of day for taking photos. In photography, the hour just after the sun rises or before it sets is called the “golden hour,” because the sun is lower in the sky and the light is softer and warmer.</p>
  </div>
  <div class="contain">
    <img src="media/raw.jpg">
    <p class="description">RAW is a file format like jpeg, but unlike jpeg, it captures all the image data recorded by your camera’s sensor rather than compressing it. When you shoot in RAW you’ll not only get higher quality images but you’ll also have far more control in post processing. For instance, you’ll be able to correct problems such as over or underexposure and adjust things like colour temperature, white balance and contrast.</p>
  </div>
  <div class="contain">
    <img src="media/flash.jpg">
    <p class="description">If you’re not careful, using your camera’s built-in flash at night or in low light can lead to some unpleasant effects like red eyes and harsh shadows. In general, it’s better to crank up the ISO and get noisier photos than to use the on-camera flash and risk ruining the shot altogether.</p>
  </div>
</div>

Answer 1

以下是您可以尝试的更改:

• 将宽度设置为最大宽度，以便减小宽度。
• 使用自动调整和最小-最大使图像响应屏幕尺寸。

You can remove the media query and nth-child stuff and it will work fine.

#grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 0.2fr;
  grid-gap: 10px;
}