网格项目在较小的屏幕尺寸上消失[重复]

Question

此问题已经在这里有了答案：

Can't scroll to top of flex item that is overflowing container（7个答案）

已关闭1分钟前。

我是一个非常新的开发人员，尝试制作像照片一样的类似照片的东西以进行一些练习。我一直非常注重CSS网格的布局...我为迄今为止所取得的成就感到非常自豪。

我有四张卡片，每张卡片都包含一张图像缩略图，一个标题和一些文本。当用户将鼠标悬停在任何卡上时，他们可以选择“查看”图像，从而显示全屏模式。一切都按我的预期进行...但是...当我减小屏幕尺寸时，某些卡最终会从屏幕上消失！

我对CSS网格很陌生，到目前为止，我已经尝试了几乎所有我知道的东西。请帮助我越过终点线！

如果将以下代码复制粘贴到codepen.io的html部分中，则下面的代码将非常有效。

预先感谢您提供的任何帮助！

const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

function handleButtonClick(event) {
  const card = event.currentTarget.closest('.card');
  const chosenImage = card.querySelector('img').src;

  image.src = chosenImage;
  modal.classList.add('open');
}

document.addEventListener('click', function(event) {
  const target = event.target;
  const isModal = target.classList[0] === 'modal';

  if (isModal) {
    modal.classList.remove('open');
  }
});

body {
  margin: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}

.wrapper {
  display: grid;
  grid-gap: 40px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 300px);
  grid-template-rows: 450px;
  grid-auto-rows: 450px;
}

.card {
  border: solid 5px #ac3434;
  border-radius: 0.8rem;
  overflow: hidden;
  background: #3a363670;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.img-wrapper {
  grid-column: 2 / span 3;
  grid-row: 2 / span 3;
  display: grid;
}

.img-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: solid 3px #ac3434;
  border-radius: 50%;
}

.card-body {
  grid-column: 1 / -1;
  grid-row: 5 / -1;
  padding: 0 10px 0;
  font-family: 'Ubuntu', sans-serif;
}

.card-body h2 {
  font-family: 'Anton', sans-serif;
}

.card-overlay {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background: #ac34347a;
  display: grid;
  place-items: center center;
  transform: translateY(100%);
  transition: 0.4s;
}

.card:hover .card-overlay {
  transform: translateY(0%);
}

.card-overlay button {
  background: none;
  color: white;
  text-transform: uppercase;
  position: relative;
  bottom: 78px;
  border: solid 3px white;
  border-radius: 0.4rem;
  font-family: 'Ubuntu', sans-serif;
}

.modal {
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: #0000008f;
  display: grid;
  place-items: center center;
  /* Make modal invisible until triggered */
  opacity: 0;
  /* Makes it so the modal does not log click 
			events */
  pointer-events: none;
}

.open {
  /* Displays the modal */
  opacity: 1;
  pointer-events: all;
}

.modal-inner {
  width: 500px;
}

.modal-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="wrapper">
  <div class="card">
    <div class="img-wrapper">
      <img src="https://picsum.photos/500">
    </div>
    <div class="card-body">
      <h2>Sunny Walls</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
      </p>
    </div>
    <div class="card-overlay">
      <button>View ➜</button>
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://picsum.photos/500">
    </div>
    <div class="card-body">
      <h2>Kit-the-Kat</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
      </p>
    </div>
    <div class="card-overlay">
      <button>View ➜</button>
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://picsum.photos/500">
    </div>
    <div class="card-body">
      <h2>Sass in the City</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
      </p>
    </div>
    <div class="card-overlay">
      <button>View ➜</button>
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://picsum.photos/500">
    </div>
    <div class="card-body">
      <h2>City Things</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
      </p>
    </div>
    <div class="card-overlay">
      <button>View ➜</button>
    </div>
  </div>
</div>

<div class="modal">
  <div class="modal-inner">
    <img>
  </div>
</div>

Answer 1

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