html - css grid 使一个单元格始终是最大的

Question

水平调整窗口大小表明最左边的单元格（大小为1fr）增长最多，但也是最先收缩的。

* {
  border: 1px solid black;
}

.grid {
  grid-template-columns: 1fr minmax(2em, max-content) minmax(2em, max-content);
  display: grid;
}

<div class="grid" width="100%">
  <div>lorem ipsum dolor sit amet</div>
  <div>consectetur adipiscing elit in</div>
  <div>venenatis dignissim erat vel fringilla</div>
</div>

当窗口足够宽以支持它时，如何使最左边的列增长最多（并将所有其他列锁定到width: max-content）

但是当窗口宽度缩小时，我希望最左边的列暂停，width: max-content然后其他列应该2em在最左边的列开始缩小之前缩小到宽度。

最左边的单元格应始终具有大小优先级

---

我试着做

grid-template-columns: max(1fr, minmax(2em, max-content)) minmax(2em, max-content) minmax(2em, max-content);

但被告知这是一个无效的属性值（1fr 似乎在计算中不可用）

标签： htmlcss

Answer 1

也许像这样

* {
  border: 1px solid black;
}

.grid {
  grid-template-columns: minmax(max-content, 1fr) minmax(2em, max-content) minmax(2em, max-content);
  display: grid;
}

<div class="grid" width="100%">
  <div>lorem ipsum dolor sit amet</div>
  <div>consectetur adipiscing elit in</div>
  <div>venenatis dignissim erat vel fringilla</div>
</div>