Оправдать элементы горизонтально в подгриде ⇐ CSS

[Anonymous]

Существует обычный макет с элементами флексбокса в заголовке ul и некоторым текстом в основном разделе p.
Оба имеют максимальную ширину = 1200 пикселей > и помещен в начало средней части страницы с использованием именованных линий сетки и подсетки.
Как выровнять заголовок ul и основной раздел p< /code> содержимое горизонтально и для сохранения ширины = 1200 пикселей одновременно при большой ширине экрана?


< pre class="snippet-code-css lang-css Prettyprint-override">

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

    body {
margin: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#app {
height: 100dvh;
display: grid;
grid-template-rows:
[head-start] auto [head-end main-start] 1fr [main-end];
grid-template-columns:
[full-start] 5% [middle-start] auto [middle-end] 5% [full-end];
}
.header-contaiter {
grid-row: head-start / head-end;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: subgrid;
}
header {
grid-column: middle-start / middle-end;
max-width: 1200px;
display: flex;
justify-content: space-between;
gap: 5px;
}
.header-contaiter header ul {
display: flex;
gap: 20px;
}
main {
grid-row: main-start / main-end;
grid-column: full-start / full-end;
display: grid;
grid-template-columns: subgrid;
}
section {
grid-column: middle-start / middle-end;
max-width: 1200px;
}

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

Test






[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]
[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]
[list]
[*]Item-1
[*]Item-1
[*]Item-1
[*]Item-1
[/list]




Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio similique officiis sit praesentium debitis velit, cumque veritatis quia voluptatibus, accusamus, voluptates neque aperiam blanditiis. Id atque eos placeat quod.

Подробнее здесь: https://stackoverflow.com/questions/793 ... in-subgrid