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

Question

在相应的父 div 中定义 grid-template-columns 时，这很好。

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

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

如果我删除 fr 列之一，它就会被破坏。

如果我要使用它，那么网格是否至少有 fr 单位？继续，你会看到第二列不再是 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

问题是您正在定义grid-column-*，如果您更改列的数量或结构，它将中断。为避免这种情况，只需删除它们，浏览器就会自动放置您的元素。

你只需要指定第一个需要跨越所有第一行：

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

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

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

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

aside {
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  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>

要使其适用于这两种情况，您需要指定 article 元素应放置在最后一列，而 side 元素应从第一列开始直到最后一列之前：

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

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

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

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

aside {
  grid-column: 1/-2;
  background-color: #7fa7e8;
}

article {
  grid-column-end: -1;
  background-color: #7ee8cc;
}

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

<wrapper style="grid-template-columns: 1fr 1fr 300px;">
<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 2

简答

当你说：

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

...您正在定义一个包含三个 explicit 列的网格。

当你切换到：

grid-template-columns: 1fr 700px

...您正在定义一个包含两个 explicit 列的网格。

此方法仅表示在网格中创建列的一种方式。

另一种方法是通过 隐式 列，您恰好使用 grid-column-start 和 grid-column-end 属性。

header {
  grid-column-start: 1; 
  grid-column-end: 4;
}

aside {
  grid-column-start: 1; 
  grid-column-end: 3;
}

article {
  grid-column-start: 3; 
  grid-column-end: 4;
}

根据隐式网格在容器级别定义多少列并不重要。如果需要，您可以定义无。列也可以在网格区域级别创建。

---

更多关于显式和隐式网格

显式网格是您明确定义的网格。当您使用以下属性时，您将创建一个显式网格：

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid（上面三个属性的简写，among others）

但是，您不需要将网格项保留在显式网格中。您基本上可以在任何您想要的地方放置项目并创建网格区域，甚至在显式网格之外。这就是隐式网格的用武之地。

隐式网格由自动生成的行和列创建，以容纳位于显式网格之外的网格项。这可能发生在line-based placement 上，使用grid-column-start、grid-row-end 等属性和grid-column 和grid-row 等简写形式。

grid-template-columns 和 grid-template-rows 设置显式轨道，grid-auto-columns 和 grid-auto-rows 设置隐式轨道。

---

参考

以下是规范定义这些网格类型的方式：

7.1. The Explicit Grid

三个属性grid-template-rows，grid-template-columns， 和grid-template-areas一起定义了一个网格的显式网格 容器。

grid 属性是一个简写，可用于设置所有三个 同时。

最终的网格最终可能会更大，因为网格项目放置在 显式网格；在这种情况下，将创建隐式轨道，这些 隐式轨道的大小将由 grid-auto-rows 和 grid-auto-columns 属性。

---

7.5. The Implicit Grid

grid-template-rows、grid-template-columns 和 grid-template-areas 属性定义了固定数量的轨道 形成显式网格。

当网格项目位于这些边界之外时，网格 容器通过添加隐式网格线生成隐式网格轨迹 到网格。

这些线与显式网格一起构成隐式网格。

grid-auto-rows 和 grid-auto-columns 属性大小这些 隐式网格轨迹。

Answer 3

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

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>