<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>
ul {
  column-count: 4; /* Количество столбцов */
  column-gap: 1rem; /* Расстояние между столбцами */
  column-fill: balance; /* Равномерно заполнять столбцы */
}

li {
   break-inside: avoid-column; /* Не переносить элементы на новый столбец */
  margin-bottom: 1rem; /* Расстояние между элементами */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.