我如何使网格包装器匹配项目的宽度？

Question

我要完成的工作是完美地包装内容的网格包装程序，因此没有笨拙的空格。这可能吗？

这里有一些代码可帮助显示我正在处理的内容。某些内容可能由于其css在其他文件中而未包括在内。我还要提到我的脚本代码也不会出现在里面。

编辑：div称为左侧部分，因为在右侧将显示另一个div来显示所选项目。

{{> 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;
}