Изменение количества колонок в зависимости от количества ссылок

Question

Каким образом можно сделать, чтобы количество колонок зависело от количества ссылок?
Данные берутся с бэкенда, поэтому количество ссылок может быть разным.
Максимум в одной колонке 7 ссылок.

.wrapper {
  width: 800px;
}

.links {
  display: flex;
  flex-wrap: wrap;
}

.link {
  text-decoration: none;
  color: black;
}

<div class="wrapper">
  <div class="links">
    <a href="" class="link">ссылка 1</a>
    <a href="" class="link">ссылка 2</a>
    <a href="" class="link">ссылка 3</a>
    <a href="" class="link">ссылка 4</a>
    <a href="" class="link">ссылка 5</a>
    <a href="" class="link">ссылка 6</a>
    <a href="" class="link">ссылка 7</a>
    <a href="" class="link">ссылка 8</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 10</a>
    <a href="" class="link">ссылка 11</a>
    <a href="" class="link">ссылка 12</a>
    <a href="" class="link">ссылка 13</a>
    <a href="" class="link">ссылка 14</a>
    <a href="" class="link">ссылка 15</a>
    <a href="" class="link">ссылка 16</a>
    <a href="" class="link">ссылка 17</a>
    <a href="" class="link">ссылка 18</a>
    <a href="" class="link">ссылка 19</a>
    <a href="" class="link">ссылка 20</a>
    <a href="" class="link">ссылка 21</a>
    <a href="" class="link">ссылка 22</a>
  </div>
</div>

Answer 1

Решение с помощью width

const container = document.querySelector('.links');
const length = container.querySelectorAll('a').length;
const columns = Math.floor(length / 4);
container.classList.add(
    `column-${
        columns > 7
          ? 7
          : columns
    }`
);

.wrapper {
  width: 800px;
}

.links {
  display: flex;
  flex-wrap: wrap;
}

.column-2 .link { width: 50%; }
.column-3 .link { width: 33.3%; }
.column-4 .link { width: 25%; }
.column-5 .link { width: 20%; }
.column-6 .link { width: 16.5%; }
.column-7 .link { width: 14%; }

.link {
  text-decoration: none;
  color: black;
}

<div class="wrapper">
  <div class="links">
    <a href="" class="link">ссылка 1</a>
    <a href="" class="link">ссылка 2</a>
    <a href="" class="link">ссылка 3</a>
    <a href="" class="link">ссылка 4</a>
    <a href="" class="link">ссылка 5</a>
    <a href="" class="link">ссылка 6</a>
    <a href="" class="link">ссылка 7</a>
    <a href="" class="link">ссылка 8</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 10</a>
    <a href="" class="link">ссылка 11</a>
    <a href="" class="link">ссылка 12</a>
    <a href="" class="link">ссылка 13</a>
    <a href="" class="link">ссылка 14</a>
    <a href="" class="link">ссылка 15</a>
    <a href="" class="link">ссылка 16</a>
    <a href="" class="link">ссылка 17</a>
    <a href="" class="link">ссылка 18</a>
    <a href="" class="link">ссылка 19</a>
    <a href="" class="link">ссылка 20</a>
    <a href="" class="link">ссылка 21</a>
    <a href="" class="link">ссылка 22</a>
  </div>
</div>

Решение с помощью display: grid;:

const container = document.querySelector('.links');
const length = container.querySelectorAll('a').length;
const columns = Math.floor(length / 4);
container.classList.add(
    `column-${
        columns > 7
            ? 7
            : columns
    }`
);

.wrapper {
  width: 800px;
}

.links {
  display: grid;
  grid-gap: 10px;
}

.column-2 { grid-template-columns: repeat(2, 1fr); }
.column-3 { grid-template-columns: repeat(3, 1fr); }
.column-4 { grid-template-columns: repeat(4, 1fr); }
.column-5 { grid-template-columns: repeat(5, 1fr); }
.column-6 { grid-template-columns: repeat(6, 1fr); }
.column-7 { grid-template-columns: repeat(7, 1fr); }

.link {
  text-decoration: none;
  color: #fff;
  background-color: #000;
  padding: 10px;
}

<div class="wrapper">
  <div class="links">
    <a href="" class="link">ссылка 1</a>
    <a href="" class="link">ссылка 2</a>
    <a href="" class="link">ссылка 3</a>
    <a href="" class="link">ссылка 4</a>
    <a href="" class="link">ссылка 5</a>
    <a href="" class="link">ссылка 6</a>
    <a href="" class="link">ссылка 7</a>
    <a href="" class="link">ссылка 8</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 9</a>
    <a href="" class="link">ссылка 10</a>
    <a href="" class="link">ссылка 11</a>
    <a href="" class="link">ссылка 12</a>
    <a href="" class="link">ссылка 13</a>
    <a href="" class="link">ссылка 14</a>
    <a href="" class="link">ссылка 15</a>
    <a href="" class="link">ссылка 16</a>
    <a href="" class="link">ссылка 17</a>
    <a href="" class="link">ссылка 18</a>
    <a href="" class="link">ссылка 19</a>
    <a href="" class="link">ссылка 20</a>
    <a href="" class="link">ссылка 21</a>
    <a href="" class="link">ссылка 22</a>
  </div>
</div>

БЛОГ НА HUSL

Изменение количества колонок в зависимости от количества ссылок

Ответы (1 шт):