新线上的内联块位置

Question

我正在尝试使用属性显示创建一个类似于pinterest的网格系统：inline-block。

但是我不理解“Colonne 4”的位置，是否有一种简单的方法可以让她在第1列之后？

第4列仍然在第1行的最大尺寸上对齐其顶部...

.test {
	color: red;
}

.container>* {
	width: 32%;
}

.colonne {
	border: 1px green solid;
	display: inline-block;
	vertical-align: top;
}

[class^="categorie"]{
border:1px black solid;
}
.categorie_1 {
	height: 30px;
}

.categorie_2 {
	height: 20px;
}

.categorie_3 {
	height: 100px;
}

.container {
	border: 1px red solid;
}

.box2 {
	display: inline-block;
	width: 200px;
	height: 100%;
	margin: 1em;
}

	<div class="container">
		<!-- 					colonne vertical 1 -->
		<div class="colonne">
			<h1>colonne 1</h1>
			<div>
				<div class="categorie_1">categorie 1</div>
				<div class="categorie_2">categorie 2</div>
			</div>
		</div>
		<!-- 					colonne vertical 2 -->
		<div class="colonne">
			<h1>colonne 2</h1>
			<div>
				<div class="categorie_3">categorie 3</div>
				<div class="categorie_2">categorie 2</div>
			</div>
		</div>
				<!-- 					colonne vertical 3 -->
		<div class="colonne">
			<h1>colonne 3</h1>
			<div>
				<div class="categorie_3">categorie 3</div>
				<div class="categorie_2">categorie 2</div>
			</div>
		</div>
				<div class="colonne">
			<h1>colonne 4</h1>
			<div>
				<div class="categorie_3">categorie 3</div>
				<div class="categorie_2">categorie 2</div>
			</div>
		</div>
	</div>