I'm currently trying to find a way how to fill flex parent with flex childs. I have data in the database, so i pick those data by foreach loop. The thing is I want to have 4 flex children per row, as you can see in the following screenshot.
And I just can't think about any loop which could let me do this.
<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>
Thanks for any advice!
Just apply a width to those elements via CSS:
.grid-pivot {
width: 25%;
}
or maybe a little less (24%) if that doesn't work due to whitespace or similar.
If you want padding, include it and add box-sizing: border-box
.grid-pivot {
box-sizing: border-box;
width: 25%;
padding: 30px;
}
And if you want margin (like in the image you posted), use calc
for the width to include it:
.grid-pivot {
width: calc(25% - 60px);
margin: 30px;
}