替代不存在的网格间隙: minmax()和padding> minmax()？

Question

我这里有两个关于网格的问题。首先是在单元格中使用填充。二是网格间距固定。

我正在尝试创建4柱网格线。第一个和第二个单元格(青色、红色)在调整大小时应该消失，并且没有它们的空间。这应该通过FR单元来完成。它正常工作。除了我在它们里面添加填充的时候。

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

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

它应该没有媒体查询Put %，而不是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>

​