Responsive 6 column grid system

<div class="row">
	<div class="container">
		<div class="d-row">
			<div class="box pink col-1">1</div>
			<div class="box orange col-2">2</div>
			<div class="box pink col-3">3</div>
			<div class="box orange col-4">4</div>
			<div class="box pink col-5">5</div>
			<div class="box orange col-6">6</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-row{
	display:grid;
    grid-template-columns:repeat(auto-fit, minmax(163px, 1fr));
	gap:10px;
	text-align:center;
	width:100%;
}
.box{
	width:100%;
	font-size:30px;
	min-height:400px;
	padding-top:30px;
	box-sizing:border-box;
}
.pink{
	background:#f77171
}
.orange{
	background:#f89e52
}
@media(max-width:680px){
  .box{
    min-height:200px;
  } 
}