css3 — PHP цикл для заполнения flex-parent строками

Question

css3 — PHP цикл для заполнения flex-parent строками

В настоящее время я пытаюсь найти способ, как заполнить flex parent с помощью flex childs. У меня есть данные в базе данных, поэтому я выбираю эти данные по циклу foreach. Дело в том, что я хочу, чтобы в каждой строке было 4 дочерних элемента flex, как вы можете видеть на следующем скриншоте.

И я просто не могу думать ни о какой петле, которая могла бы позволить мне сделать это.

<div class="grid">
<?php foreach ($categories as $c): ?>
<div class="grid-row">
<div class="grid-pivot"><a href="results.php?searchtype=1&id=<?php echo($a['category_id']) ?>"><?= $c['categoryJmeno'] ?></a></div>
</div>
<?php endforeach; ?>
</div>

Спасибо за любой совет!

0

css3 flexbox foreach loops php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Просто примените ширину к этим элементам с помощью CSS:

.grid-pivot {
width: 25%;
}

или, может быть, немного меньше (24%), если это не сработает из-за пробелов или чего-то подобного.

Если вы хотите заполнить, включите его и добавьте box-sizing: border-box

.grid-pivot {
box-sizing: border-box;
width: 25%;
padding: 30px;
}

И если вы хотите, чтобы поля (как на изображении вы разместили), используйте calc для ширины, чтобы включить это:

.grid-pivot {
width: calc(25% - 60px);
margin: 30px;
}

1