如何使列（grid-template-columns）只占用內容的空間（寬度）？

Question

我想要的是列之間幾乎沒有空間。 相反，它們是超間隔的。

我嘗試的任何自動/自動填充/自動適應組合都沒有成功。 請問我可能缺少什么？

我的jsfiddle： https://jsfiddle.net/5p8ehray/1/

HTML

<div class="object1">
   <div class="midpic"><a href="   http://catalog/   "><img id="postTB" src="https://example.com/wp-content/uploads/2020/07/5f158740d0b12-WwL26kF.png" onerror="this.src='https://i.imgur.com/3yt1y67.png'"></a></div>
   <div class="rightColb">
      <div class="linkdiv"><span class="linkspann"><a href="http://catalog/">hi (catalog)</a></span></div>
      <div class="bottomDiv"><span class="midspann">submitted <a href="https://example.com/">
         by
         tester
         </a> about an hour ago</span>
      </div>
      <div class="bottomDiv2"><a href=" http://catalog/ "><span class="commentCount">comment</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<span class="viewscount">17 Views</span></div>
   </div>
   <img alt="" src="//www.gravatar.com/avatar/2cabe95c2c4d54609738dfe2cbd02ddc?s=40&amp;r=g&amp;d=retro" srcset="//" class="avatar avatar-40 photo" height="40" width="40">
</div>

CSS

.object1{
    min-width:100%;
    max-width:100%;
    display:inline-grid;
    max-height:20px;
    /*grid-template-columns: 40px 92px auto;*/
    grid-template-columns: auto-fill;
    column-gap: 16px;       
}

.midpic{    
    grid-row:1;
    align-items:center;
}
      
.rightColb{    
    grid-row:1;
    flex-direction: column;             
    max-width:85%;              
}

Answer 1

嘗試將display:flex添加到.object1 class

  .object1{
    min-width:100%;
    max-width:100%;
    display:flex;
    max-height:20px;
    /*grid-template-columns: 40px 92px auto;*/
    grid-template-columns: auto-fill;
    column-gap: 16px;   
  }