Площадь сетки в родительской сетке игнорируется в CSS ⇐ CSS

[Anonymous]

Я использую сетку CSS в моем веб -приложении, чтобы определить три начальных горизонтальных раздела (строки), а также два вертикальных раздела (столбцы) в моем приложении - см. Ниже:

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

.app-container {
background-color: $primary-surface-color;
color: $white;
min-block-size: 100vh;
min-block-size: 100dvh;
display: grid;
grid-template-columns: 5rem 1fr;
grid-template-rows: 4rem 1fr auto;
grid-template-areas:
"navbar header"
"navbar main"
"navbar footer";
transition: grid-template-columns 0.3s ease;
}

И это то, что мой заголовок sass выглядит:

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

header {
top: 0;
position: sticky;
grid-area: header;
display: grid;
background-color: $black-almost;
opacity: 0.9;
color: white;
padding: 0;
align-items: center;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header-left header-right";
}

Как вы можете видеть из вышеупомянутого кода, я, затем, попробуйте гнездиться в другую сетку в заголовке , чтобы я мог создавать два раздела, т.е. Hamburger-menu sass:

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

.hamburger-menu {
grid: header-left;
justify-content: start;
cursor: pointer;
}

Проблема, которую я вижу, состоит в том, что значок меню не выровнен должным образом, и когда я осматриваю его в инструментах разработчиков, я вижу, что заголовок лево игнорируется-см. Ниже:


Подробнее здесь: https://stackoverflow.com/questions/795 ... red-in-css