如何将 calc() 与最小内容一起使用？

Question

我有一个网格布局，可以像这样简化。

我想要实现的是 .side 应该默认使用 min-content 获取内容需要的任何内容 space，但用户可以通过增加 --size 来扩大它] 自定义 css 属性.

我尝试了 calc(min-content + var(--size)) 但它不起作用。我无法分配特定值，例如 calc(100px + var(--size))，因为原始大小应由其内容决定。

实现此功能的最佳方法是什么？

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  margin: 0;
}

.container {
  --size: 10px;

  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas: 
    "l t"
    "l b";
  
  /* doesn't work */
  /* grid-template-columns: calc(min-content + var(--size)) 1fr; */
  
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr 1fr;
}

.container > * {
  border: solid 1px black;
}

.side {
  grid-area: l;
}

.top {
  grid-area: t;
}

.bottom {
  grid-area: b;
}

<section class="container">
  <div class="side">This should have a 10px gutter on the right</div>
  <div class="top">Top</div>
  <div class="bottom">Bottom</div>
</section>

Answer 1

对网格项使用 width:calc(100% + var(--size))。这将产生溢出，您可以通过添加间隙来纠正：

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  margin: 0;
}

.container {
  --size: 20px;

  height: 100vh;
  display: grid;
  grid-template-areas: 
    "l t"
    "l b";
  
  /* doesn't work */
  /* grid-template-columns: calc(min-content + var(--size)) 1fr; */
  
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap:var(--size);
}

.container > * {
  border: solid 1px black;
}

.side {
  grid-area: l;
  width:calc(100% + var(--size));
}

.top {
  grid-area: t;
}

.bottom {
  grid-area: b;
}

<section class="container">
  <div class="side">This should have a 10px gutter on the right</div>
  <div class="top">Top</div>
  <div class="bottom">Bottom</div>
</section>

如何将 calc() 与最小内容一起使用？

How do I use calc() with min-content?

html

css

grid-layout