Question

我有两行网格布局：

标题和
一个内容部分，有时有两列，有时只有一列。

基本上，您通常使用带有内容布局的标头，但有时我想动态关闭右列。

标头的高度必须由其内容确定。确定：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

正如我在评论中所写，问题是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>

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

1 个答案: