Столбчатая диаграмма

[Кириллиана]

При помощи div создается контейнер для диаграммы. Диаграмма столбчатая. 4 категории. В каждой категории 4 столбца... как после первого столбца добавить еще три? При условии, что каждой категории можно присваивать только один класс.

[Вадим Фролов]

Сообщение от Кириллиана

При помощи div создается контейнер для диаграммы. Диаграмма столбчатая. 4 категории. В каждой категории 4 столбца... как после первого столбца добавить еще три? При условии, что каждой категории можно присваивать только один класс.

А в чем проблема вообще? Если я правильно понял задание, то все очень просто <div class="wrapper-table">

<div class="category">Категория 1
<div class="stolbec">1 столбец</div>

<div class="stolbec">1 дополнительный столбец</div>
<div class="stolbec">2 дополнительный столбец</div>
<div class="stolbec">3 дополнительный столбец</div>

<div class="stolbec">2 столбец</div>
<div class="stolbec">3 столбец</div>
<div class="stolbec">4 столбец</div>
</div>


<div class="category">Категория 2
<div class="stolbec">1 столбец</div>

<div class="stolbec">1 дополнительный столбец</div>
<div class="stolbec">2 дополнительный столбец</div>
<div class="stolbec">3 дополнительный столбец</div>

<div class="stolbec">2 столбец</div>
<div class="stolbec">3 столбец</div>
<div class="stolbec">4 столбец</div>
</div>


<div class="category">Категория 3
<div class="stolbec">1 столбец</div>

<div class="stolbec">1 дополнительный столбец</div>
<div class="stolbec">2 дополнительный столбец</div>
<div class="stolbec">3 дополнительный столбец</div>

<div class="stolbec">2 столбец</div>
<div class="stolbec">3 столбец</div>
<div class="stolbec">4 столбец</div>
</div>


<div class="category">Категория 4
<div class="stolbec">1 столбец</div>

<div class="stolbec">1 дополнительный столбец</div>
<div class="stolbec">2 дополнительный столбец</div>
<div class="stolbec">3 дополнительный столбец</div>

<div class="stolbec">2 столбец</div>
<div class="stolbec">3 столбец</div>
<div class="stolbec">4 столбец</div>
</div>



</div>


и стили ниже
.wrapper-table {
display: flex;
justify-content: center;
flex-direction: column;
}

.category {
display: flex;
justify-content: space-around;

margin-bottom: 20px;
}

.stolbec {
width: 150px;
height: 250px;
border: solid 3px blue;
font-size: 24px;
text-align: center;
overflow: hidden;
}

[Вадим Фролов]

Сообщение от Кириллиана

При помощи div создается контейнер для диаграммы. Диаграмма столбчатая. 4 категории. В каждой категории 4 столбца... как после первого столбца добавить еще три? При условии, что каждой категории можно присваивать только один класс.

Если что то не так, напишите, сделаем как надо.

[Кириллиана]