PHP循环用行填充flex-parent

Question

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!

Answer 1

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;
}