Grid row won't span when set to auto

Question

I have a grid layout with two rows:

1. A header and
2. a content section which sometimes has two columns, and sometimes has only one.

Basically your typical header with content layout, except I want to dynamically turn off the right column sometimes.

• The height of the header must be determined by its content. OK: grid-template-rows: min-content auto;
• The header must span the one or both columns. But this fails. I've tried the following approaches:

This will only work when there is one column. If there are two columns, this row won't span over them.

.header {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: auto;
}

Same as

.header {
  grid-row-start: 1;
  grid-column: 1 / span auto;
}

This will only work when there is two columns. It creates a place on the screen for a second column, even when there isn't one.

.header {
  grid-row-start: 1;
  grid-column: 1 / span 2;
}

• Finally, I'm a bit puzzled by the fact that the two columns aren't the same width. Probably related to auto-fill, but can't really get my head around that, is there a solution for that?

This is the code:

.header {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: auto;
}

.left {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 1;
}

.right {
  grid-row-start: 2;
  grid-column-start: 2;
  grid-column-end: 2;
}

.wrapper {
    height: 100%;
    width: 100%;

    display: grid;
    grid-gap: 10px;
    grid-column: 1 / -1;
    grid-template-rows: min-content auto;
}

<div style="height: 300px;">
    <div class="wrapper">
        <div class="header" style="background-color:#006;">
            HEADER
        </div>
        <div class="left" style="background-color:#600;">
            LEFT
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
        </div>
        <div
            class="right"
            v-if="true"
            style="background-color:#060;">
            RIGHT
        </div>
    </div>
</div>

Result looks like:

Answer 1

As I wrote in my comments, the problem is repeat(auto-fill, 1fr). This is invalid. A simple fix would be to settle for two columns each 1fr and conditionally have the main column (e.g. if it's the last child) span both.

For example (using grid-template):

.wrapper {
    height: 100%;
    width: 100%;
    color: white;

    display: grid;
    grid-template:
        "header header" min-content
        "main   aside" auto / 1fr 1fr;
    grid-gap: 10px;
}

.header {
    grid-area: header;
    background-color: #006;
}

.left {
    grid-area: main;
    background-color: #600;
}

.left:last-child {
    grid-column: 1 / -1;
}

.right {
    grid-area: aside;
    background-color:#060;
}

<h4>With two columns</h4>

<div style="height: 300px;">
    <div class="wrapper">
        <div class="header">HEADER</div>
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
    </div>
</div>

<h4>Only one column</h4>

<div style="height: 300px;">
    <div class="wrapper">
        <div class="header">HEADER</div>
        <div class="left">LEFT</div>
    </div>
</div>

---

Or if you do not want to use grid-template, this will work too:

.wrapper {
    height: 100%;
    width: 100%;
    color: white;

    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: min-content auto;
    grid-gap: 10px;
}

.header {
    grid-column: 1 / 3;
    background-color: #006;
}

.left {
    grid-column: 1 / 2;
    background-color: #600;
}

.left:last-child {
    grid-column: 1 / 3;
}

.right {
    grid-column: 2 / 3;
    background-color:#060;
}

<h4>With two columns</h4>

<div style="height: 300px;">
    <div class="wrapper">
        <div class="header">HEADER</div>
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
    </div>
</div>

<h4>Only one column</h4>

<div style="height: 300px;">
    <div class="wrapper">
        <div class="header">HEADER</div>
        <div class="left">LEFT</div>
    </div>
</div>