CODEWITHSUNDEEP
htmlcss
m0a
m0a

Reputation: 1005

How to make columns (grid-template-columns) only take up the space(width) of the content?

What I want is for the Columns to have little to no space between them. Instead they're super spaced out.

Any combination of auto/auto-fill/auto-fit that I try is not doing the trick. What might I be missing, please?

My 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%;              
}

Upvotes: 0

Views: 45

Answers (1)

aks44
aks44

Reputation: 432

Try adding display:flex to .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;   
  }

Upvotes: 1

Related Questions