При оборачивании дива в ссылку ломается вся структура блока. Что неверно? Как сделать?

Question

[danteasy]

Здравствуйте! После того как оборачиваю "div" в "a" то происходит следующее:
по сути все ломается.
Без ссылки:
С ссылкой:

<div class="sessions-container">
                <div class="sessions_item">
                    <span>Стандартный RitmStyle</span>
                </div>
                <div class="sessions_item">
                    <span>Стандартный RitmStyle</span>
                </div>
                <div class="sessions_item">
                    <span>Стандартный RitmStyle</span>
                </div>
                <div class="sessions_item">
                    <span>Стандартный RitmStyle</span>
                </div>
                <div class="sessions_item">
                    <span>Стандартный RitmStyle</span>
                </div>
            </div>

.sessions_item {
    background-image: url(../img/sessions-bg.jpg);
    height: 258px;
    border-radius: 10px;
    position: relative;
}

.sessions_item:first-child {
    background-size: cover;
    grid-row: 1/3;
    height: 540px;
}

.sessions-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px;
    margin-top: 100px;
}

Comments

[Badarus]

Попробуйте:

a.sessions_item {
    background-image: url(../img/sessions-bg.jpg);
    height: 258px;
    border-radius: 10px;
    position: relative;
}

[Ankhena]

И где код со ссылками?
Желательно на codepen.io и так, чтобы было видно проблему.
Сделаете, позовите.

Ну или просто поменяйте divна a, а не оборачивайте.

[danteasy]

Ankhena,

Без оборачивания дива в ссылку

С оборачиванием

Ломается структура, как решить? Нужно, чтобы див был ссылкой.

Если прописать первой ссылке класс, а затем задать блоку стили, то структура тоже иная, отличная от нужной:
пример

Нужен вид, как в первой ссылке

[Одиночка Айс]

danteasy, у вас grid child на sessions_item, а вы поверх них лепите ссылки, естественно, все ломается. Либо, как уже сказали, используйте a вместо div, либо ссылки засуньте в div.

[Ankhena]

danteasy, ну конечно, все сломалось, вы же классы-то не перевесили.

Нужно, чтобы див был ссылкой.

Не нужно. div становится лишней оберткой.

Еще раз: просто поменяйте divна a.

Answer 1

[Варлам Ерофеич]

Примерно так:

Answer 2

[Anonymous]

Поменяйте просто div на a, а не оборачивайте див в а.

Answer 3

[svm2001]

Нельзя помещать в строчный элемент блочный. А именно в тег a тег div. Т.к. верстка не пройдет валиацию.