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

Question

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

我想要实现的是 .side 应该默认使用 min-content 占用内容所需的任何空间，但用户可以通过增加 --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>