css grid css проблема с переносом текста

Question

проблема в адаптации. Нужно чтобы блоки съезжали вниз логотипа и были как в списке. Как можно такое реализовать? Оно во время просмотра с телефона то за страницу уходит, то сам текст сжимается до переносов.

HTML:

<body>
<div class="header">
        <a href="#" class="header-link__forum">Форум</a>
        <a href="#" class="header-link__rules">Правила</a>
        <a href="#" class="logo"><img src="images/logo.svg" alt="Логотип"></a>
        <a href="#" class="header-link__saes">SA-ES</a>
        <a href="#" class="header-link__info">Информация</a>
        <!-- <a href="#" class="header-button">Личный кабинет</a> -->
    <div class="header-text"></div>
</div>

SCSS:

body {
margin: 0px; // delete borders at the beginning
background-color: $bg_color_na; 
 }
.header { // all main markup header
background-color: $bg-color_a;
display:grid;
grid-template-columns: 2fr 2fr 1fr 2fr 2fr;
grid-template-areas: ". . link_logo . ." "link__forum link__rules link_logo link__saes link__info";
grid-template-rows: 40fr 70fr;
gap: 30px;
grid-template-columns: minmax(50px, 200px);

&header-link__forum {
    grid-area: link__forum;
}
&header-link__rules {
    grid-area: link__rules;
}
&header-logo {
    grid-area: link__logo;
}
&header-link__saes {
    grid-area: link__saes;
}
&header-link__info {
    grid-area: link__info;
}

}

БЛОГ НА HUSL

css grid css проблема с переносом текста

Ответы (0 шт):