更改网格模板列会中断布局

时间：2019-03-15 08:22:35

标签： html css css3 css-grid

在相应的父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>

3 个答案:

答案 0 :(得分：1)

这是因为代码为grid-column-start，grid-column-end和header设置了aside和article-请参见下面的示例，了解{{ 1}}，但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;
}

答案 1 :(得分：1)

简短回答

当你说：

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

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

当您切换到：

grid-template-columns: 1fr 700px

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

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

另一种方法是通过 implicit 列，您碰巧正在使用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）

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

隐式网格由自动生成的行和列创建，以容纳位于显式网格外部的网格项目。使用grid-column-start，grid-row-end之类的属性以及grid-column和grid-row之类的简写，line-based placement可能会发生这种情况。

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属性的大小   隐式网格轨迹。

答案 2 :(得分：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元素应放置在最后一列，aside元素应从第一个元素开始直到最后一个元素：

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>

相关问题
最新问题