Как отобразить элементы из списка на странице неупорядочено (один выше другой ниже, правее левее итд)? используя HTML, Thymeleaf, CSS

Код ниже достает элементы из списка и располагает их в ряд. Хотелось бы чтобы элементы располагались хаотично, неупорядоченно (выше ниже левее правее) но в пределах определенной зоны что б не наезжать на другие элементы. Либо другой вариант расположить их по окружности. Любой из вариантов подойдет.

<div class="container" >
    <p th:each="categories : ${category}" class="categoriya" th:text="${categories}">All categories</p>
</div>
.categoriya {
    margin: 1.5em 0;
    color: #bbbbbb;
    height: 1em;
    padding: .5em;
    margin-right: 1em;
    border: .25em solid #ccc;
    background: #000;
    color: #f5e6e6;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}