为什么我的网格元素如此巨大并且相互重叠？

Question

我的页面上有一个网格，出于某种原因，无论我尝试什么，网格中的元素都很大并且彼此重叠，尽管类似的网格出现在我的不同页面上没有问题。我很困惑为什么会这样，因为这个网格的样式与我的其他工作网格没有什么不同。

HTML:

<main class="albumView">
                <ul class="grid">
                    <li>
                        <figure>
                            <img src={image1} alt="Hello"></img>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src={image2} alt="Hello1"></img>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src={image3} alt="Hello2"></img>
                        </figure>
                    </li>
                </ul>
            </main>

CSS:

.albumView {
  background-color:rgb(1, 0, 1);
  padding:2rem;
  margin:0;
}

 .albumView > .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  grid-template-rows: repeat(2, 275px);
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.albumView > .grid > li:nth-child(1n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li:nth-child(2n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li:nth-child(3n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li > figure {
  height: 100%;
}

.albumView > .grid > li > figure > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

正如您在这里看到的，图像只是巨大的重叠块：

Answer 1

对您的 css 进行一些更改。您正在使用错误的选择器选择图像，并且可能图像太大

.albumView {
  background-color:rgb(1, 0, 1);
  padding:2rem;
  margin:0;
}

 .albumView > .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  grid-template-rows: repeat(2, 275px);
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.albumView > .grid > li:nth-child(1n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li:nth-child(2n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li:nth-child(3n) {
  grid-column: span 1;
  grid-row: span 1;
}

.albumView > .grid > li > figure {
  height: 100%;
}
.albumView > .grid > li > figure > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
figure{
  margin :0;
}

check codepen

为什么我的网格元素如此巨大并且相互重叠？

Why are my grid elements so huge and overlapping with one another?

html

css

frontend

web-frontend

display