/countries: show countries in 4 columns

[php-coder]

Сейчас страны выводятся одним длинным списком и появляется скроллинг. При этом справа на странице много свободного места. Хочется, чтобы когда стран много, то вместо одного столбца, выводить два, три, или даже четыре.

Для этого нужно немного изменить верстку в шаблоне страницы (см. src/main/webapp/WEB-INF/views/country/list.html), чтобы выводить все в несколько столбцов. Количество ссылок в столбце, давай установим в 30. Т.е. если стран <= 30, то будет один столбец, если <= 60, то два, если <= 90, то три, если <=120, то четыре. Больше быть столбцов не должно, поэтому, если стран более 120, то нужно динамически посчитать и изменить максимальное число стран в столбце. Например, если стран 150, то у нас будет 4 столбца по 38 стран.

Также, будет необходимо поработать над тем, чтобы верстка была responsive, т.е. если размер экрана маленький, как на iPhone, то выводить все в один столбец, как раньше (тут все просто, нужно будет просто правильные CSS классы подобрать).

Подробнее про версту с Bootstrap и модель страницы: https://getbootstrap.com/docs/3.3/css/#grid
Документация по Thymeleaf: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

[php-coder]

Похоже, что это можно сделать с помощью CSS:

• https://stackoverflow.com/questions/12979119/css-single-list-with-dynamic-column-wrapping
• https://caniuse.com/multicolumn
• https://webdesign.tutsplus.com/articles/an-introduction-to-the-css3-multiple-column-layout-module--webdesign-4934
• https://habr.com/ru/post/153955/ (in Russian 🇷🇺 )
• https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Using_multi-column_layouts (in Russian 🇷🇺 )