CSS Grid Layout. Как сохранить элементы меню внутри панели навигации при изменении размера? ⇐ Html

[Anonymous]

Я практикуюсь в создании макета веб-сайта, который в основном структурирован с использованием CSS-сеток — сетки из одного столбца и нескольких строк — со следующими идеями:
1. Панель навигации имеет определенную высоту

2. Будет основной тег, который будет представлять веб-сайт высотой 100 vh

3. Все остальные элементы div после них будут иметь высоту 100vh

4. Нижний колонтитул — это последний элемент, высота которого устанавливается позже или по количеству содержимого (пока IDK)
Вот следующий код HTML и CSS, который у меня есть:

Код: Выделить всё

:root {
--navHeight: 12vh;
--iconSize: 24px;
}

html,
body {
margin: 0;
padding: 0;
}

.pageStructure {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-auto-rows: 1fr;
}

.nav {
/* The navbar must stay on top of the screen */
position: sticky;
top: 0;

/* To get a visual on it */
border: 8px dotted green;
background-color: hsla(0, 0%, 0%, 0.5);
color: white;

/* Height */
max-height: var(--navHeight);

/* Display type + display config */
display: grid;
grid-template-columns: auto 1fr auto;
justify-items: center;
align-items: center;

.iconMockup {
height: var(--iconSize);
width: var(--iconSize);
background-color: red;
}
}

nav>* {
/* Doesn't seem to do much in aligning my items in center */
align-content: center;
align-items: center;
}

main {
background-color: rgb(0, 128, 255);
border: 8px dashed blue;
min-height: 100vh;
}

.section {
background-color: pink;
border: 8px dashed purple;
min-height: 100vh;
padding-top: var(--navHeight);

#innerContent {
border: 8px dashed blue;
}
}

#threeColumnGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

footer {
background-color: greenyellow;
border: 8px dashed green;
}

.buttonWithIcon {
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-items: center;
background-color: blue;
max-height: inherit;
}

Код: Выделить всё

Something


ABC Company


Menu



Main Section


Section X


Section X

Section Y




Section X

Section Y

Section Z



Footer
Footer
Footer
Footer
Footer
Footer

Результат:


Пока дизайн выглядит хорошо! Однако есть один большой недостаток:
Вы видите, что все внутри навигационной панели идеально выровнено и центрировано при высоте навигационной панели 12vh?


Да, визуальное представление нарушается, когда я меняю высоту на 4vh (потому что мне нужно меньшее значение). navbar):


Проблема та же, когда я сохраняю высоту навигационной панели равной 12vh и просто увеличиваю масштаб в браузере до 200 %


Я не знаю, как это исправить. У меня уже есть настройки выравнивания с помощью следующего класса CSS

Код: Выделить всё

.buttonWithIcon {
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-items: center;
background-color: blue;
max-height: inherit;
}

Все это без использования каких-либо фреймворков React, использования сторонних шрифтов и настройки размеров шрифтов. Это всего лишь простой CSS, который я пытаюсь исправить.
Но я немного не понимаю, как это исправить. Любая помощь приветствуется!

Подробнее здесь: https://stackoverflow.com/questions/798 ... ng-resized