css - 替代不存在的网格间隙 : minmax() and padding> minmax()?

Question

我这里有 2 个关于网格的问题。首先是单元格中的填充。二是grid-gap固定值。

我正在尝试创建 4 列网格。第一个和第二个单元格(蓝绿色、红色)在调整大小时应该消失，并且没有空间容纳它们。这应该用 FR 单元来完成。它通常有效。除非我在其中添加填充。

有没有办法在调整窗口/屏幕大小时使填充消失？

第二个问题是当我从单元格中删除填充时。现在网格间隙有问题。 Grid-gap 设置为 1em，因此即使蓝绿色和红色细胞消失，左侧仍然存在 2em 大小的间隙。我在考虑网格间隙 minmax()，但它不存在。有没有办法在调整窗口/屏幕大小时使网格间隙消失？

它应该没有媒体查询使用 % 而不是 em 并不能解决问题，因为差距仍然存在。

main {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(min-content, 30ch) minmax(min-content, 15em);
  grid-template-rows: 20vh;
  grid-gap: 1em;
}

section {
  padding: 1em;
}

section:nth-child(1) {
  background-color: teal;
}

section:nth-child(2) {
  background-color: red;
}

section:nth-child(3),
section:nth-child(4) {
  background-color: gray;
}

<main>
  <section></section>
  <section></section>
  <section>
    Lorem ipsum dolor sit amet
  </section>
  <section>
    Lorem ipsum dolor sit amet
  </section>
</main>

Answer 1

对于间隙问题，您可以在考虑使用 1fr 单元的地方使用额外的列来模拟它们。对于填充，您必须首先考虑 minmax(0,1fr)，然后使用带有额外包装器的边距。

main {
  display: grid;
  grid-template-columns: minmax(0,1fr) 0.3fr minmax(0,1fr) 0.3fr minmax(min-content, 30ch) 0.3fr minmax(min-content, 15em);
  grid-template-rows: 20vh;
}

section > div {
  margin: 1em;
}

section:nth-child(1) {
  background-color: teal;
}

section:nth-child(2) {
  background-color: red;
  grid-column:3;
}

section:nth-child(3),
section:nth-child(4) {
  background-color: gray;
  grid-column:5;
}

section:nth-child(4) {
  grid-column:7;
}

<main>
  <section>
    <div></div>
  </section>
  <section>
    <div></div>
  </section>
  <section>
    <div>Lorem ipsum dolor sit amet</div>
  </section>
  <section>
    <div>Lorem ipsum dolor sit amet</div>
  </section>
</main>

另一种想法是为前两个元素考虑嵌套网格:

main {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(min-content, 30ch) minmax(min-content, 15em);
  grid-template-rows: 20vh;
}

main > div {
  display: grid;
  grid-gap:1em;
  grid-template-columns: 1fr 1fr;
  overflow:hidden;
  padding-right:1em;
}

section {
  padding: 1em;
}

section:nth-child(1) {
  background-color: teal;
}

section:nth-child(2) {
  background-color: red;
}

main > section:nth-child(2),
main > section:nth-child(3) {
  background-color: gray;
}

main > section:nth-child(3) {
  margin-left:1em;
}

<main>
  <div>
    <section>
    </section>
    <section>
    </section>
  </div>
  <section>
    Lorem ipsum dolor sit amet
  </section>
  <section>
    Lorem ipsum dolor sit amet
  </section>
</main>