Проблема с отображением списка элементов с использованием столбцов

Question

Я пытаюсь показать 3 списка элементов, используя свойство CSS3 для подсчета столбцов.
Я хочу показать его, используя Title column 1 в качестве title для моего столбца, и показать под ним список элементов.
Моя проблема в том, что мои столбцы перемещают мои элементы в другой неправильный столбец.

Это мой код:

#columnasFooter{
  column-count: 3;
}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>

Answer 1

Это абсолютно нормальное поведение.

Если вы не хотите ломать свои списки, вам нужно добавить дополнительный стиль:

#columnasFooter li{break-inside: avoid-column;}

#columnasFooter{column-count: 3;}
#columnasFooter li{break-inside: avoid-column;}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>