Как правильно вывести меню html css по колоннам?

Question

[Ivan Tumanow]

Работаю в вордпрессе, и получаю навигационное меню из меню, и мне надо его вывести так, чтобы оно располагась по столбикам с учетом что используется li

У меня выглядит так(красный текст означает что должен быть новый столбик)


Можно ли как-то вывести меню так, чтобы элементы располагались в следующем порядке:

Comments

[Ankhena]

Первый вариант: грид сетка, как в ответе Сергея.
Второй вариант, выдерживающий переполнение: обернуть элементы первого столбца в свой li, по аналогии со всеми остальными. Заголовок скрыть. И дальше просто 3 столбца.

[Сергей delphinpro]

Ankhena, был еще вариант сделать для внутренних ul, li { display: contents; } и дальше ссылки раскинуть в сетку, поменяв направление flow с column на row. Только непонятно, как контролировать перенос на новый столбик.

[Ankhena]

Сергей delphinpro, если можно задавать класс для элементов (по идее в WP можно), то класс будет задавать номер столбца.
Но это сломает семантику вложенных списков.

Answer 1

[Сергей delphinpro]

.navbar-footer-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "i1 c2 c3"
                       "i2 c2 c3"
                       "i3 c2 c3"
                       "i4 c2 c3";
}
.navbar-footer-list > li:nth-child(1) { grid-area: i1; }
.navbar-footer-list > li:nth-child(2) { grid-area: i2; }
.navbar-footer-list > li:nth-child(3) { grid-area: i3; }
.navbar-footer-list > li:nth-child(4) { grid-area: i4; }
.navbar-footer-list > li:nth-child(5) { grid-area: c2; }
.navbar-footer-list > li:nth-child(6) { grid-area: c3; }