Как сделать так, чтобы сетка соответствовала ширине элементов?

Question

То, что я пытаюсь сделать sh, - это сетка, которая прекрасно оборачивает содержимое, так что нет неудобных пробелов. Возможна ли такая вещь?

Вот код, помогающий показать, с чем я имею дело. Некоторые вещи могут быть не включены из-за того, что они css находятся в других файлах. Также я должен упомянуть, что мой код скрипта также не будет там.

Редактировать: div называется левой частью, потому что справа будет еще один div для отображения выбранных элементов.

HTML:

{{> navbar }}
<link rel="stylesheet" href="./public/css/earn.css">
<link rel="stylesheet" href="./public/css/testing.css">
<div class="content-box">
  <div class="content_wrapper_static">
    <div class="content">
      <div class="left_part">
          <div id="itemcontainer" data-simplebar class="itemcontainer" style="padding: 20px; background-color: #1c1c1c; border-radius: 10px;">
          </div>
      </div>
    </div>
  </div>
</div>
{{> modal }}
{{> footer }}

CSS:

.itemcontainer {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    column-gap: 10px;
    row-gap: 15px;
    width: auto;
    height: 100%;
}

.item {
    height: 140px;
    width: 140px;
    border-radius: 5px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}

.item img{
  max-width: 90%;
  max-height: 90%;
}

.cost {
  color: white;
  font-size: 10px;
}
.item-title {
  color: white;
  font-size: 10px;
}

body {
  background-color: black;
}

.left_part {
    width: 60%;
    height: 100%;
    float: left;
}

.right_part {
    width: 35%;
    height: 100%;
    float: right;
}

.item p {
  color: white;
}