css - 使 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>

标签： csscss-grid

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>