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

Question

[Ivan Tumanow]

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

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


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

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; }