Возникла проблема с реализацией задачи.
Нужно реализовать вывод списка так, чтобы при добавлении 5 блоков с текстом в div текст отображался посередине и со шрифтом большого размера, а при добавлении 6 блока, текст перемещался во 2 колонку и в 2 колонках шло распределение по 3 текста в каждом, при этом размер текста должен уменьшаться.
Как реализовать такую задачу.
Прикрепил фото ниже, чтобы можно было увидеть.
Также вставлю код, который я уже реализовал, но он не имеет уменьшения текста при переносе во 2 блок, и не распределяется равномерно по 3 текста в 2 столбцах, при добавлении 6 текста.
<style>
.prcontainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 100rem;
width: 24rem;
padding: 5px;
position: relative;
gap: 5px;
bottom: 0;
top: 250px;
}
.pcdiv {
position: relative;
display: flex;
height: 190px;
padding: 0 50px;
top: 118.06px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pcstron {
font-family: 'Muller';
font-style: normal;
font-weight: 800;
font-size: 189.812px;
line-height: 190px;
margin-left: 90px;
color: #FFFFFF;
}
.pcimglogo {
margin-left: auto;
}
.pritem {
display: flex;
flex-wrap: wrap;
margin: 0 0 0 190px;
flex-direction: row;
align-items: center;
justify-content: space-between;
grid-template-rows: repeat(2,150px);
grid-auto-flow: column;
column-gap: 1rem;
row-gap: 10px;
}
.pptem {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.ptem {
}
.pcp {
font-family: 'Muller';
font-style: normal;
font-weight: 500;
font-size: 50px;
line-height: 61px;
margin-top: 0;
margin-bottom: 0;
}
.pcpp {
font-family: 'Muller';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 41px;
width: 778px;
margin-top: 0;
}
.pcpc {
font-family: 'Muller';
font-style: normal;
font-weight: 700;
font-size: 90px;
line-height: 125px;
color: #E70808;
width: 525px;
margin-top: 0;
}
</style>
<div >
<div id="html-content-holder" style=" background-color: #F0F0F1; color: #00cc65; display: inline-block; position: relative; width: 2000px; height: 2000px;">
<div class="pcdiv">
<strong class="pcstron">Прайс</strong>
<?
if ($logo != '') {
?><img class="pcimglogo" src="<?=$logo['val']?>"><?
}else{
?><img class="pcimglogo" src="/admin/dizain-market/generate.php?id_logo=0&title=Нейл Студио&txt=Студия наращивания ногтей"><?
}
?>
</div>
<div class="prcontainer">
<div class="pritem">
<div class="ptem">
<p class="pcp">Гель лак + маникюр</p>
<p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
</div>
<div class="pptem">
<p class="pcpc">300p</p>
</div>
</div>
<div class="pritem"><div class="ptem">
<p class="pcp">Гель лак + маникюр</p>
<p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
</div>
<div class="pptem">
<p class="pcpc">300p</p>
</div></div>
<div class="pritem"><div class="ptem">
<p class="pcp">Гель лак + маникюр</p>
<p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
</div>
<div class="pptem">
<p class="pcpc">300p</p>
</div></div>
<div class="pritem"><div class="ptem">
<p class="pcp">Гель лак + маникюр</p>
<p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
</div>
<div class="pptem">
<p class="pcpc">300p</p>
</div></div>
<div class="pritem"><div class="ptem">
<p class="pcp">Гель лак + маникюр</p>
<p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
</div>
<div class="pptem">
<p class="pcpc">300p</p>
</div></div>
</div>
</div>
</div>