更改网格模板列会中断布局 [英] Changing grid template columns breaks layout

问题描述

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

When defining grid-template-columns in the corresponding parent div this is fine.

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

但是如果我只想要两列怎么办？

But what if I only want two columns?

如果我删除 fr 列之一，它就会受到重击。

If I delete one of the fr columns, it gets whacked.

如果要使用网格，网格的最小单位是 fr 吗？继续，您将看到第二列不再是700px。

So does a grid have a min of fr units if I am to use this? Go ahead and you will see the 2nd column is no longer 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

A simple example of this here: 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>

推荐答案

简短答案

当您说：

Short Answer

When you say:

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

...您定义的网格具有三个显式

... you are defining a grid with three explicit columns.

当您切换到：

grid-template-columns: 1fr 700px

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

... you are defining a grid with two explicit columns.

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

另一种方法是通过 implicit 列，您碰巧正在使用 grid-column-start 和 grid-column-end 属性。

Another way is through implicit columns, which you happen to be doing with the grid-column-start and grid-column-end properties.

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

在容器级别定义多少列并不重要隐式网格。您可以根据需要定义任何内容。列也可以在网格区域级别上创建。

It doesn't matter how many columns you define at the container level in terms of the implicit grid. You can define none if you want. Columns can also be created at the grid area level.

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

An explicit grid is the grid that you explicitly define. You create an explicit grid when you use the following properties:

• grid-template-rows


• grid-template-columns


• grid-模板区域


• 网格（这是上述三个属性的简写，其他）

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid (which is the shorthand for the three properties above, among others)

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

However, you are not required to keep grid items in the explicit grid. You can essentially place items and create grid areas anywhere you want, even outside the explicit grid. That's where the implicit grid comes in.

隐式网格由自动生成的行和列创建，以适应所定位的网格项在显式网格之外。这可能发生在基于行的放置中，属性，例如 grid-column-start ， grid-row-end 和简写形式的 grid -列和网格行。

The implicit grid is created by rows and columns that are automatically generated to accommodate grid items that are positioned outside of the explicit grid. This can happen with line-based placement, using properties such as grid-column-start, grid-row-end and shorthands like grid-column and grid-row.

grid-template-columns 和 grid-template-rows 大小显式轨道，网格自动列和 grid-auto-rows 大小隐式轨道。

While grid-template-columns and grid-template-rows size explicit tracks, grid-auto-columns and grid-auto-rows size implicit tracks.

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

Here's how the spec defines these grid types:

7.1。显式
网格

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

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container.

grid 属性是可用于设置所有三个属性的简写

The grid property is a shorthand that can be used to set all three at the same time.

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

The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.

7.5。隐式
网格

grid-template-rows ， 网格模板列和
网格模板区域属性定义了固定数量的轨道，这些轨道
形成显式网格。

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid.

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

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid.

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

These lines together with the explicit grid form the implicit grid.

网格自动行和网格自动列属性确定这些
隐式网格轨迹的大小。 / p>

The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks.

这篇关于更改网格模板列会中断布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！