Showcase-snippet: Creating a flexbox-grid and limiting the number of columns

The CMS Questions
1

I am trying to setup my own flexbox-based grid for the showcase snippet. The structure is very basic as of yet:

<?php

$projects = page('projects')->children()->visible();
if(isset($limit)) $projects = $projects->limit($limit);

?>

<div class="flex-grid-thirds">

	<?php foreach($projects as $project): ?>

	  <div class="col">

	  	<a href="#">
	  		<?= $project->title()->html() ?>
			</a>
			
	  </div>

	<?php endforeach ?>

</div>

Here is the respective CSS applied to the columns created from each project (I am displaying all projects, having set the limit to 100):

.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 32%;
}

.col {
  background: salmon;
  padding: 20px;

  margin: 0 1% 0 1%;
}

.col:last-child {
	margin: 0 0% 0 1%;

	background: PaleGreen;
}

.col:first-child {
	margin: 0 1% 0 0%;

	background: PaleGreen;
}

Here’s a jsfiddle version of the snippet, without the php but with 5 projects put in manually: https://jsfiddle.net/08j0gk28/

My question is: How can I limit the amount of projects the snippet is putting in one row of the grid? Say I have 10 projects and I only want 3 projects displayed per row (i.e. 3 columns per row). Right now if I had 10 projects in the CMS, the snippet would put all of them into a single row, creating 10 columns and making each column very small.

Thanks to anyone who can help me set this up. Have a good day.

2

Check out the documentation for flexbox, here a nice overview.

flex-wrap: wrap;