html - 更改网格模板列会破坏布局

Question

在相应的父 div 中定义 grid-template-columns 时，这没问题。

wrapper {
   display:grid;
   grid-template-columns: 1fr 1fr 700px;
}

但是如果我只想要两列呢？

如果我删除其中一个 fr 列，它就会崩溃。

那么如果我要使用它，网格是否有最小的 fr 单位？继续，您会看到第 2 列不再是 700px。

wrapper {
   display:grid;
   grid-template-columns: 1fr 700px; /* removing the 1fr defining only 2 columns,
                                        destroys the layout */
}

这里有一个简单的例子:https://codepen.io/theboman/pen/PLRZjB

body {
  padding: 0px;
  margin: 0px;
}

wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 700px;  /* remove 1fr above and you will see */
}

header {
  grid-column-start: 1;
  grid-column-end: 4;
  height: 40px;
  background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
  <header>
    <nav>
      <ul>
        <li>click here</li>
        <li>2nd click here</li>
      </ul>
    </nav>
  </header>
  <aside>
    Aside - content here
  </aside>
  <article>
    some content goes here
  </article>

</wrapper>

Answer 1

那是因为代码为header设置了grid-column-start和grid-column-end，aside 和 article - 请参阅下面的演示，它适用于 grid-template-columns: 1fr 700px 并在 grid-column 中进行了一些更改> 值(value)观:

body {
  padding: 0px;
  margin: 0px;
}

wrapper {
  display: grid;
  grid-template-columns: 1fr 700px;
}

header {
  grid-column-start: 1;
  grid-column-end: 3; /* CHANGED */
  height: 40px;
  background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px;
}

aside {
  grid-column-start: 1;
  grid-column-end: 2; /* CHANGED */
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  grid-column-start: 2; /* CHANGED */
  grid-column-end: 3; /* CHANGED */
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
  <header>
    <nav>
      <ul>
        <li>click here</li>
        <li>2nd click here</li>
      </ul>
    </nav>
  </header>
  <aside>
    Aside - Map content here
  </aside>
  <article>
    some content goes here
  </article>
</wrapper>