如何在min-content中使用calc()函数？

Question

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

我想要实现的是，通过默认使用“min-content”来获取“.side”所需的任何空间，但用户可以通过增加“--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>

- Hao Wu

---

为什么不直接使用填充(padding)呢？然后将其添加到您选择的一侧。 - a.mola

@a.mola 因为内容不能在填充区域内部... - Hao Wu

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>

- Temani Afif

---

啊，我明白了，这很聪明，非常感谢！ - Hao Wu