Перемещайте дочерние элементы в элементах CSS-grid-template-areas. ⇐ Html

[Anonymous]

Я пытаюсь изучить области шаблонов сетки.
Но мой код не работает так, как предполагаемый шаблон области:

"title title"

"both-a Both-b"

"left-a right-a"

"left-b right-b"

Все левые элементы должны располагаться слева от соответствующих («a» или «b») правых элементов.

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

* {
border: 1px solid black;
}

.wrapper {
display: grid;
grid-template-areas: "title title"
"both-a both-b"
"left-a right-a"
"left-b right-b";
}

.wrapper > header {
grid-area: title;
}

.both > .topic-a {
grid-area: both-a;
}

.both > .topic-b {
grid-area: both-b;
}

.left > .topic-a {
grid-area: left-a;
}

.left > .topic-b {
grid-area: left-b;
}

.right > .topic-a {
grid-area: right-a;
}

.right > .topic-b {
grid-area: right-b;
}

.left-side {
color: red;
}

.right-side {
color: blue;
}

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

Title



[list]
[*]both-A 1st item
[*]2nd item
[*]3rd item
[/list]


[list]
[*]both-B 1st item
[*]2nd item
[*]3rd item
[/list]





[list]
[*]left-A 1st item
[*]2nd item
[*]3rd item
[*]nth item
[*]nth item
[*]nth item
[*]nth item
[*]nth item
[/list]


[list]
[*]left-B 1st item
[*]2nd item
[*]3rd item
[/list]





[list]
[*]right-A 1st item
[*]2nd item
[*]3rd item
[/list]


[list]
[*]right-B 1st item
[*]2nd item
[*]3rd item
[*]nth item
[*]nth item
[*]nth item
[*]nth item
[*]nth item
[/list]

Я знаю, что это, вероятно, глупая ошибка, но я не могу ее понять.

Подробнее здесь: https://stackoverflow.com/questions/479 ... ems-around