设置为自动时，网格行不会跨越

Question

我有一个两行的网格布局：

1. 标题和
2. 内容部分有时有两列，有时只有一列。

基本上是带有内容布局的典型标题，除了我有时想动态关闭右栏。

• 标题的高度必须由其内容决定。好的：grid-template-rows: min-content auto;
• 标题必须跨越一列或两列。但这失败了。我尝试了以下方法：

这仅在只有一列时才有效。如果有两列，则此行不会跨越它们。

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

同

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

这仅在有两列时有效。 它会在屏幕上为第二列创建一个位置，即使没有。

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

• 最后，我对这两列的宽度不同这一事实感到有些困惑。可能与auto-fill 有关，但我无法真正理解这一点，是否有解决方案？

这是代码：

.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>

结果如下：

Answer 1

正如我在 cmets 中所写，问题是 repeat(auto-fill, 1fr)。 This is invalid。一个简单的解决方法是分别设置两列 1fr 并有条件地让主列（例如，如果它是最后一个子列）跨越两者。

例如（使用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>

---

或者如果你不想使用grid-template，这也可以：

.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>