Блог

Главная - Вопросы по программированию - Галерея CSS grid и теги привязки

Галерея CSS grid и теги привязки

#css #scroll #anchor #css-grid #anchor-scroll

#css #прокрутка #привязка #css-сетка #привязка-прокрутка

Вопрос:

Работают ли теги привязки по-другому, если они являются ячейками в галерее изображений CSS grid? Я добавил id =»XXXX» в каждую ячейку сетки, где XXX — это идентификатор записи базы данных для каждого изображения. Когда я добавляю хэш идентификатора в URL-адрес, и страница загружается, она прокручивается до ячейки с этим идентификатором, но, похоже, она прокручивается до конца ячейки, и мне приходится использовать колесико мыши для прокрутки страницы вверх, чтобы я мог видеть полную ячейку.

Ответ №1:

Тег привязки отлично работает 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>

Попробуйте приведенный выше код в вашем браузере. Он отлично работает без каких-либо проблем.