CSS grid gallery and anchor tags

Question

Do anchor tags work differently if they are cells in a CSS grid image gallery? I've added an id="XXXX" to each cell of the grid where the XXX is the id of the database record for each image. When I add the hash of the id to the URL and the page loads it does scroll to the cell that has that id, but it seems to scroll to the end of the cell and I have to use the mouse wheel to scroll the page up so I can see the full cell.

Answer 1

Anchor tag works perfectly in grid as they work in normal cases.

.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>

Try above code in your browser. It works perfectly without any issue.