Список ссылок (меню) в несколько колонок – в нескольких вариантах – Column-count, Flex, Grid
column-count: 3;
.columns_list {
column-count: 3;
column-gap: 25px;
border: 1px solid black;
}Ссылки идут последовательно по колонкам
количество колонок задается – column-count: 3;
можно установить зазор между колонками – column-gap: 25px;
можно установить полоску разделитель между колонками – column-rule: 1px solid #454545;
display: grid;
.columns_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap : 25px;
border: 1px solid black;
}Ссылки идут последовательно по строчно, если нужно по колонкам – лучше вариант column-count: n;
количество колонок задается количеством фрагментов – grid-template-columns: 1fr 1fr 1fr;
можно установить зазор между колонками – grid-column-gap : 25px;
display: flex;
.columns_list {
display: flex;
flex-flow: row wrap;
column-gap: 25px;
border: 1px solid black;
}
.columns_list li {
width: 31%;
}Самый неудобный вариант.
Количество колонок задается шириной элемента li (width: 31%), причем надо учесть зазор между колонками – column-gap: 25px;
HTML
<section class="columns">
<ul class="columns_list">
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Одна ссылка с длинным длинным длинным длинным длинным текстом</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">Много</a></li>
<li class=""><a href="#" class="">ссылок</a></li>
</ul>
</section>Дополнительно
Обрезать текст, который не вмещается и поставить троеточие (…) – https://vahro.ru/other/when-text-is-too-long/
Счетчик ссылок – в данном случае не имеет смысла, но в качестве списка может быть что угодно – заголовки, параграфы и т.д. – и их можно нумеровать.
.columns {
counter-reset: count_li;
}
.columns_list li {
list-style: none;
counter-increment: count_li;
}
.columns li:before {
content: "№ " counter(count_li) " - ";
}