six box grid css html custom no gap

HTML

<div class="grid-six unique-class">
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
  <div class="grid-six-box gsb1">
    <div class="grid-six-img"></div>
    <div class="grid-six-title">Title</div>
  </div>
</div>

CSS

/* general reset */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
* { 
	box-sizing: border-box; 
	transition: all 0.2s; 
}
.open-sans {
	font-family:"Open Sans", sans-serif;
}
/* general reset */

/* grid-four */
.grid-six {
	font-family:"Open Sans", sans-serif;
	display: grid;
	grid-template-columns: repeat(6,calc(100%/6));
	grid-template-rows: 100%;  
	grid-gap: calc(0%/6);
	color:#FFF;
}
.grid-six-box {
	font-family:"Open Sans", sans-serif;
  display:block;
	width:100%;
	min-height:200px;
	padding:20px;
	text-align:center;
	background:linear-gradient(purple,blue);
	border-radius:10px;
}
@media(max-width:1024px) {
	.grid-six {
      	display:block;
      	grid-template-columns: auto;
      	grid-template-columns: auto;
  	}  
    .grid-six-box {
      grid-column: auto;
      grid-row: auto;
      margin-bottom:10px;
    }  
}
/* grid-four */