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

Разбираемся в CSS
Ответить
Anonymous
 Площадь сетки в родительской сетке игнорируется в 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»