Alternative to non-existing grid-gap: minmax() and padding> minmax()?

Question

I have 2 issues with grid here. First is with padding in the cell. Second is with grid-gap fixed value.

I am trying to create 4 column grid. First and second cells (teal, red) should disappear when resizing and there is no space for them. This should be done with FR unit. It normally works. Except when I add padding inside them.

Is there a way to make padding disappear when resizing the window/screen?

Second problem is when I remove padding from cells. Now there is a problem with grid-gap. Grid-gap is set to 1em, so even if teal and red cells disappear, there is still this gap sized 2em on the left side. I was thinking about grid-gap minmax(), but it doesn't exist. Is there a way to make grid-gap disappear when resizing a window/screen?

It should have no media query Put % instead of em is not solving the issue as the gap is still here.

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

For the gap issue you can simulate them using extra columns where you consider the use of 1fr unit. For the padding you have to first consider minmax(0,1fr) then use margin with an extra wrapper.

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>

Another idea is to consider a nested grid for the first two elements:

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>