使CSS Grid动态宽度中的列尽可能小以适合上下文

Question

是否可以使CSS Grid中的某些列的宽度灵活，以适合其内容的大小？

就像在图片上一样-这是一个列表项，左侧为图片，右上角的小信息应为动态宽度并适合内容的大小，另外两个区域应占用所有可用空间。

对于这两个区域，适合其内容的动态宽度很重要，而不是固定宽度（例如小于默认网格行的x倍）。

.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

当然

grid-template-columns: auto 1fr auto;

会做到这一点。

  

自动

     

是与最大内容相同（如果最大）的关键字。最小值表示占用网格轨迹的网格项目的最大最小尺寸（由min-width / min-height指定）。

     

^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>