JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-group">
   <div class="block col3">post 1<br>second line</div>
   <div class="block col3">post 2</div>
   <div class="block col3">post 3</div>
   <div class="block col3">post 4</div>
   <div class="block col3">post 5<br>second line<br>third line</div>
   <div class="block col3">post 6</div>
   <div class="block col3">post 7</div>
   <div class="block col3">post 8</div>
   <div class="block col3">post 9</div>
</div>
       
       <br><br>
       
<div class="block-group">
   <div class="block col5">post 1<br>second line</div>
   <div class="block col5">post 2</div>
   <div class="block col5">post 3</div>
   <div class="block col5">post 4</div>
   <div class="block col5">post 5<br>second line<br>third line</div>
   <div class="block col5">post 6</div>
   <div class="block col5">post 7</div>
   <div class="block col5">post 8</div>
   <div class="block col5">post 9</div>
</div>

CSS

/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/.block-group,.block,.block-group:after,.block:after,.block-group:before,.block:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.block-group{*zoom:1}
.block-group:before,.block-group:after{display:table;content:"";line-height:0}
.block-group:after{clear:both}
.block-group{list-style-type:none;padding:0;margin:0}
.block-group>.block-group{clear:none;float:left;margin:0 !important}
.block{float:left;width:100%}

/* ########### 3 colums ############ */
/* 1 col */
.col3 {
	width: 100%;
}
/* 2 cols */
@media (min-width: 768px) and (max-width: 960px) {
	.col3 {
		width: 50%;
	}
	.col3.block:nth-child(2n+1) {
		clear: left;
	}
}
/* 3 cols */
@media (min-width: 960px) {
	.col3 {
		width: 33%;
	}
	.col3.block:nth-child(3n+1) {
		clear: left;
	}
}
/* ########### end 3 colums ############ */

/* ########### 5 colums ############ */
/* eine spalte */
.col5 {
	width: 100%;
}
/* zwei spalten */
@media (min-width: 350px) and (max-width: 542px) {
	.col5 {
		width: 50%;
	}
	.col5.block:nth-child(2n+1) {
		clear: left;
	}
}
/* drei spalten */
@media (min-width: 543px) and (max-width: 735px) {
	.col5 {
		width: 33%;
	}
	.col5.block:nth-child(3n+1) {
		clear: left;
	}
}
/* vier spalten */
@media (min-width: 736px) and (max-width: 927px) {
	.col5 {
		width: 25%;
	}
	.col5.block:nth-child(4n+1) {
		clear: left;
	}
}
/* fĂĽnf spalten */
@media (min-width: 928px) {
	.col5 {
		width: 20%;
	}
	.col5.block:nth-child(5n+1) {
		clear: left;
	}
}
/* ########### end 5 colums ############ */

.block {border: 1px solid #afafaf;}