CSS 网格库和锚标签

Question

如果锚标记是 CSS 网格图像库中的单元格，它们的工作方式会有所不同吗？我在网格的每个单元格中添加了一个 id="XXXX"，其中 XXX 是每个图像的数据库记录的 ID。当我将 id 的哈希添加到 URL 并加载页面时，它确实滚动到具有该 id 的单元格，但它似乎滚动到单元格的末尾，我必须使用鼠标滚轮向上滚动页面所以我可以看到完整的单元格。

Answer 1

Anchor 标签在grid 中完美工作，因为它们在正常情况下工作。

.grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}
.grid_cell {
    text-align: center;
}
.grid_cell img {
    width: 250px;
}

<main>
    <div class="grid_container">
        <a href="#abc_1" class="grid_cell" id="abc_1"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt="">
            <div class="counter">1</div></a>

        <a href="#abc_2" class="grid_cell" id="abc_2"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt="">
        <div class="counter">2</div></a>
        
        <a href="#abc_3" class="grid_cell" id="abc_3"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">3</div></a>

        <a href="#abc_4" class="grid_cell" id="abc_4"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">4</div></a>

        <a href="#abc_5" class="grid_cell" id="abc_5"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">5</div></a>

        <a href="#abc_6" class="grid_cell" id="abc_6"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">6</div></a>
        <a href="#abc_7" class="grid_cell" id="abc_7"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">7</div></a>
        <a href="#abc_8" class="grid_cell" id="abc_8"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">8</div></a>
        <a href="#abc_9" class="grid_cell" id="abc_9"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">9</div></a>
        <a href="#abc_10" class="grid_cell" id="abc_10"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">10</div></a>
        <a href="#abc_11" class="grid_cell" id="abc_11"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">11</div></a>
        <a href="#abc_12" class="grid_cell" id="abc_12"><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-explorer.svg" alt=""><div class="counter">12</div></a>
    </div>
</main>

在您的浏览器中尝试上述代码。它可以完美运行，没有任何问题。