Могу ли я получить помощь по макету сетки? ⇐ CSS

[Anonymous]

Сейчас я изучаю CSS и изо всех сил пытаюсь заставить его работать так, как я хочу, и не могу понять почему. Вот код:

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

Test

body {
margin: 0px;
padding: 0px;
}

header {
display: grid;
grid-template-columns: 1fr 11fr 1fr 1fr;
grid-template-areas: "logo . btnusr btnlogoff";
}

.logo {
grid-area: "logo";
height: 35px;
padding: 5px;
}

.btnusr {
grid-area: "btnusr";
height: 35px;
padding: 5px;
}





[img]https://source.unsplash.com/random/921x222[/img]
[img]https://source.unsplash.com/random/400x400[/img]

Я пытаюсь сделать так, чтобы логотип располагался в левом верхнем углу, пустая ячейка 11fr и две другие кнопки справа.
Я' Я определяю область сетки в определенных местах, но, что бы я ни менял, объекты не перемещаются в нужное место. Даже если я поменяю область сетки с логотипа на btnusr, логотип всегда будет первым, а кнопка всегда будет помещена во вторую ячейку, вот отпечаток вида сетки в браузере:



Подробнее здесь: https://stackoverflow.com/questions/784 ... rid-layout