Make column in CSS Grid dynamic width as small as possible to fit context

Question

Is it possible to make some columns in CSS Grid flexible width, to fit the size of its content?

Like on the picture - it's a list item, image on the left, and small info in the top right corner should be of dynamic width and fit the size of the content, two other areas should take all the available space.

It's important to have dynamic width that fits its content for those two areas, and not fixed width like x-times smaller than the default grid row.

.grid-container {
  display:             grid;
  grid-template-areas: 'small1 big1 small2'
                       'small1 big2 big2';     
}

.grid-container > .small1 { grid-area: small1 }
.grid-container > .small2 { grid-area: small2 }
.grid-container > .big1   { grid-area: big1 }
.grid-container > .big2   { grid-area: big2 }

.grid-container > * { 
  margin: 5px; 
  padding: 5px; 
  border: 1px solid black; 
 }

<div class="grid-container">
  <div class="small1">small1<br/>small1<br/>small1</div>
  <div class="small2">small2</div>
  <div class="big1">big1</div>
  <div class="big2">big2</div>
</div>

Answer 1

Sure

grid-template-columns: auto 1fr auto;

will do that.

auto

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

^MDN

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'small1 big1 small2' 'small1 big2 big2';
}

.grid-container>.small1 {
  grid-area: small1
}

.grid-container>.small2 {
  grid-area: small2
}

.grid-container>.big1 {
  grid-area: big1
}

.grid-container>.big2 {
  grid-area: big2
}

.grid-container>* {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}

<div class="grid-container">
  <div class="small1">small1<br/>small1<br/>small1</div>
  <div class="small2">small2</div>
  <div class="big1">big1</div>
  <div class="big2">big2</div>
</div>