3

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

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>

4

3 回答 3

1

这是因为代码已经为,grid-column-start和-grid-column-end设置了和- 请参阅下面的演示，它适用于值的一些更改：headerasidearticlegrid-template-columns: 1fr 700pxgrid-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>

于 2019-03-15T08:40:09.723 回答
1

简答

当你说：

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

...您正在定义一个具有三个显式列的网格。

当您切换到：

grid-template-columns: 1fr 700px

...您正在定义一个带有两个显式列的网格。

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

另一种方法是通过隐式列，您碰巧正在使用grid-column-startandgrid-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（这是上述三个属性的简写，等等）

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

隐式网格由自动生成的行和列创建，以容纳位于显式网格之外的网格项。这可能发生在基于行的放置中，使用诸如 和 之类的属性以及诸如grid-column-start和之类的grid-row-end简写。grid-columngrid-row

Whilegrid-template-columns和grid-template-rowssize 显式轨道，grid-auto-columns以及grid-auto-rowssize 隐式轨道。

参考

以下是规范如何定义这些网格类型：

7.1。显式网格

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

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

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

7.5。隐式网格

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

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

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

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

于 2019-03-15T15:03:07.860 回答
0

问题在于，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>

于 2019-03-15T09:32:04.380 回答